一.input标签

  • 输入项标签，不同type属性，会有不同的显示效果和不同的作用

  • input标签的属性：

    • disabled：表单项禁用，不可修改值，也不会被提交

    • readonly：表单项只读，不可修改值，但会被提交

二.案例

根据Name来获取并设计（本人使用）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <!--显示获取的1值 并且 设置input权限为只读-->

    <input type="button" value="只读/可写" onclick="autoGain()">

    <!--作用框，用于实现效果-->

    <input type="text" name="wzwName" readonly="readonly">

</body>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script type="text/javascript">

    // 只读/可写 切换单机事件方法

    function autoGain() {

        // 获取input中的值

        var val = $("input[name='wzwName']").val();

        // 如果等于1说明已经设置为只读模式了

        if(val == 1)

        {

            // 将只读模式删除

            $("input[name='wzwName']").removeAttr("readonly");

        }else{

            // 添加只读模式到input框中并设置value值为1

            $("input[name='wzwName']").val("1").attr("readonly","readonly");

        }

    }

</script>

</html>

根据id来获取并设计

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function switchUser() {

            var usernameEl = document.getElementById("username");

            const beforeVal = usernameEl.getAttribute("readonly");

            console.log("切换前状态：" + getStatus(beforeVal));

            if (beforeVal === null) {

                usernameEl.setAttribute("readonly", "readonly");

            } else {

                usernameEl.removeAttribute("readonly");

            }

            const afterVal = usernameEl.getAttribute("readonly");

            console.log("切换后状态：" + getStatus(afterVal));

        }

        function getStatus(readonlyVal) {

            if (readonlyVal === null) {

                return "读写"

            } else {

                return "只读"

            }

        }

    </script>

</head>

<body>

用户名：<input type="text" id="username" name="username"><br>

<button onclick="switchUser()">切换用户名readonly属性</button>

</body>

</html>

三.总结

  1. 此方法不一定适用于所有人，所有环境，这是我找了5种以上的方法才写出来的，可能在他人的电脑不一定奏效
  2. readonly后面的值最好也是要readonly,当然用true也可以，不过调成false可是不会取出只读的效果
  3. removeAttr()同样是找了很久才找到的删除input标签上属性的一种方案，应用范围很广！！！
  4. 我这里只用了以Name为点来写，可以变化思维，ID同样奏效

js技术之input只读功能可以通过js设置readonly的更多相关文章

  1. js实现复制 、剪切功能-clipboard.min.js 示例

    html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...

  2. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  3. APNs功能之Node.js和Mysql应用总结

    APNs功能之Node.js和Mysql应用总结 这篇文档主要是总结Node.js和Mysql的学习心得体会.当然也可以看作是此前所写的消息推送服务的续篇. 简单描述下应用背景,我们的应用需要实现苹果 ...

  4. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  5. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. 如何用zabbix监控mysql多实例

    agent上起了多了 mysql实例,占用不同的端口,agent 仅在初始状况下,塞入脚本和 键配置,然后重启. 以后维护的时候(mysql端口变动),要做到 不能 动agent,力争 只在 web端 ...

  2. Specified cast is not valid(C#) 引发的思考（装箱，拆箱本质）

    没有很华丽的语言,直接拿代码说事情把. 这段代码,会报错吗?  结论:当然不会 这段代码会报错了.原因是为啥? 这里面的水比较深.也要提醒各位写代码的适合要引起注意.异常:System.Invalid ...

  3. Symfony Bundle开发视频教程分享

    之前分享了自己录制的<Symfony 5全面开发>视频教程,收到的反馈不错,说学到了东西,讲的很深入等等. 上一次分享的链接:自己录制的Symfony5视频教程,免费分享给大家学习. 小晒 ...

  4. Mac Mini 安装Ubuntu20.04 KVM

    在一台 Mac Mini mid 2011上安装Ubuntu20.04并配置KVM环境, 过程也适用于其他版本的Mac Mini. 硬件配置 I5 2415, 内存8G*2, 硬盘 SSD 500G ...

  5. Qt：lambda表达式

    说明 c11之后加入了lambda表达式,所以Qt也支持 加载项 CONFIG += c++11 用法 [ capture ] ( parameters ) mutable -> return_ ...

  6. Chrome：开发者模式下复制Element下的代码

    Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了

  7. Go基础知识梳理（二）

    Go基础知识梳理(二) 简单函数的定义 //有参数有返回值 func sum(a int, b int) int { return a + b } //无返回值 func sum(a int, b i ...

  8. @PostConstruct使用注意点

    前景提要:在一个项目中,由于数据库中敏感词删除掉了,但是在网页进行匹配时仍然能够匹配上已删除的词. 查看项目源码发现使用了@PostConstruct注解: 此注解的作用是:@PostConstruc ...

  9. 微信小程序+laravel 7+ Redis +短信宝 实现手机号验证码登录

    以下代码可以进行优化和封装:这里我实现功能为主,就不封装啦.小伙伴可以自己试着封装一下. 1:书写登录表单 <view class="container"> <v ...

  10. Sublime Text3中文环境设置

    Sublime Text3中文环境设置 1.首先打开安装好的的Sublime软件,选择Preferences下面的Package Contorol选项出现弹窗方框 2.在弹窗输入install pac ...