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同样奏效
posted @ 2021-06-11 14:55  骚哥  阅读(2409)  评论(0)  编辑  收藏  举报