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