js技术之input只读功能可以通过js设置readonly ⼀.input标签
输⼊项标签，不同type属性，会有不同的显⽰效果和不同的作⽤
input标签的属性：
disabled：表单项禁⽤，不可修改值，也不会被提交
readonly：表单项只读，不可修改值，但会被提交
⼆.案例
根据Name来获取并设计（本⼈使⽤）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
jquery的attr属性<body>
<!--显⽰获取的1值并且设置input权限为只读-->
<input type="button" value="只读/可写" onclick="autoGain()">
<!--作⽤框，⽤于实现效果-->
<input type="text" name="wzwName" readonly="readonly">
</body>
<script src="/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 = ElementById("username");
const beforeVal = Attribute("readonly");
console.log("切换前状态：" + getStatus(beforeVal));
if (beforeVal === null) {
usernameEl.setAttribute("readonly", "readonly");
} else {
}
const afterVal = Attribute("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同样奏效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。