Form表单之input⽂本框操作
input⽂本框操作：（该系列⽂章js的操作内容为jQuery，jquery需要各位⾃⼰引⼊，后期会补充进js的操作⽅式）
input框禁止输入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Form表单⽂本框操作⽰例1</title>
<style>
body{font-size:14px;}
label{display:inline-block;width:7em;margin-left:0.3em;margin-right:0.3em;}
input{margin-top:0.3em;margin-bottom:0.3em;}
.tipmsg{font-size:14px;color:#f00;}
</style>
</head>
<body>
<form>
<h3>input⽂本框</h3><hr>
<div>
<label>input输⼊框1：</label>
<input type="text" name="text1" value="input⽂本框1"/>
<span class="tipmsg">
input框默认type为text⽂本框；但如果样式库定义了type或者定义了input:not([type])则会存在样式上的区别；
</span>
</div>
<div>
<label>input输⼊框2：</label>
<input type="text" name="text2" value="input⽂本框2只读" readonly="readonly"/>
<span class="tipmsg">
input="text"含readonly="readonly"属性，内容只读，不能⼿动编辑;
readonly="true"和readonly="false"都⽆法⼿动编辑，应该是只要有readonly属性就是只读，这两种⽅式都是不规范的；
</span>
</div>
<div>
<label>input输⼊框3：</label>
<input type="text" name="text3" value="input⽂本框3禁⽤" disabled="disabled"/>
<span class="tipmsg">
input="text"含disabled="disabled"属性，内容禁⽤；
disabled="true"和disabled="false"都是禁⽤状态，应该是只要有disabled属性就是只读，这两种⽅式都是不规范的；
disabled和readonly属性同时存在则表现为disabled的属性⾏为；
</span>
</div>
<div>
<label>input输⼊框4：</label>
<input type="text" id="text4"/>
<span class="tipmsg">
$("#text4").val("js为⽂本框赋值");//⽤js改变⽂本框的值（id选择器）
</span>
</div>
<div>
<label>input输⼊框5：</label>
<input type="text" name="input5"/>
<span class="tipmsg">
$("input[name='input5']").val("js为⽂本框赋值");//⽤js改变⽂本框的值（name选择器）；暂不讨论name数组和class
</span>
</div>
<div>
<div>
<label>input输⼊框6：</label>
<input type="text" id="text6" value="⽂本框focus切换只读属性"/>
<span class="tipmsg">
$("#text6").attr("readonly","readonly");//js控制⽂本框只读
$("#text6").removeAttr("readonly");//js移除readonly属性；本例中还讲到了js的css()；<br>
•对于HTML元素本⾝就带有的固有属性，在处理时，使⽤prop⽅法。<br>
•对于HTML元素我们⾃⼰⾃定义的DOM属性，在处理时，使⽤attr⽅法。<br>
之前我⼀直⽤的attr，今天突然⽤到了控制单选按钮是否禁⽤时发现⽤attr⽆效，才注意到⽤prop；
</span>
</div>
</form>
<script src="./in.js"></script>
<script>
$(function(){
$("#text4").val("js为⽂本框赋值");
$("input[name='input5']").val("js为⽂本框赋值");
$("#text6").focus(function(){
/*
var read = $(this).attr("readonly");
if(read==undefined){
$(this).attr("readonly","readonly");
$(this).css("background-color","#eee");
}else{
$(this).removeAttr("readonly");
$(this).css("background-color","#fff");
}
*/
var read = $(this).prop("readonly");
if(read==false){//attr这⾥是undefined，⽽prop的为false;
$(this).prop("readonly","readonly");
$(this).css("background-color","#eee");
}else{
$(this).removeProp("readonly");
$(this).css("background-color","#fff");
}
});
});
</script>
</body>
</html>
对于下拉、单选、复选，发现⾃⼰每次都要去⽹上重新符合⾃⼰需求的⽅式取值或者选中，故准备写Form系列的⽂章备查。这篇⽐较基础，但希望给觉得有⽤的⼈以借鉴。

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