js技术之input只读功能可以通过js设置readonly

一.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

上一篇:在Chrome浏览器中安装JSON显示插件


下一篇:js中大于小于符号连用问题