Form表单之input文本框操作

来源：互联网发布：淘宝怎么删除空间图集编辑：程序博客网时间：2024/06/09 21:27

input文本框操作：（该系列文章js的操作内容为jQuery，jquery需要各位自己引入，后期会补充进js的操作方式）

<!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>    <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="./jquery-1.x.min.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系列的文章备查。这篇比较基础，但希望给觉得有用的人以借鉴。

0 0