十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

js操作常见表单字段disabled、form、 name、readOnly、tabIndex等属性方法

百恒网络 2017-01-17 1291

前面我介绍了通过js实现如何获取表单元素,同时实现对表的重置(form.reset())和提交(form.submit())操作,需要了解表单有那些字段以及如何进一步操作的同事,最好是先熟悉表单的基本操作《js中表单的基础知识及提交表单和重置表单的操作方法》再接看此文。
     可以像访问页面中的其他元素一样,使用原生 DOM 方法访问表单元素。此外,每个表单都有elements 属性,该属性是表单中所有表单元素(字段)的集合。这个 elements 集合是一个有序列表, 其中包含着表单中的所有字段,例如<input>、<textarea>、<button>和<fieldset>。每个表单字 段在 elements 集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和 name 特性来访问它 们。下面来看一个例子。 
     var form = document.getElementById("form1"); 
     //取得表单中的第一个字段 
     var field1 = form.elements[0]; 
     //取得名为"textbox1"的字段
      var field2 = form.elements["textbox1"]; 
     //取得表单中包含的字段的数量 
     var fieldCount = form.elements.length;
      如果有多个表单控件都在使用一个 name(如单选按钮),那么就会返回以该 name 命名的一个 NodeList。例如,以下面的 HTML代码片段为例。 
<form method="post" action="javascript:alert('Form submitted!')" id="myForm">
     <ul>
          <li><input type="radio" name="color" value="red">Red</li>
          <li><input type="radio" name="color" value="green">Green</li>
          <li><input type="radio" name="color" value="blue">Blue</li>
     </ul>
</form> 
     在这个 HTML表单中,有 3个单选按钮,它们的 name 都是"color",意味着这 3个字段是一起的。 在访问 elements["color"]时,就会返回一个 NodeList,其中包含这 3 个元素;不过,如果访问 elements[0],则只会返回第一个元素。来看下面的例子。 
     var form = document.getElementById("myForm"); 
     var colorFields = form.elements["color"];
          alert(colorFields.length); //3 
    var firstColorField = colorFields[0];
    var firstFormField = form.elements[0];
          alert(firstColorField === firstFormField); //true
     以上代码显示,通过 form.elements[0]访问到的第一个表单字段,与包含在 form.elements ["color"]中的第一个元素相同。     
     也可以通过访问表单的属性来访问元素,例如 form[0]可以取得第一个表单字 段,而 form["color"]则可以取得第一个命名字段。这些属性与通过 elements 集 合访问到的元素是相同的。但是,我们应该尽可能使用 elements,通过表单属性访 问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。 
     1. 共有的表单字段属性
      除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多 种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有字段所共有的。表单字段共有的 属性如下。 
     disabled:布尔值,表示当前字段是否被禁用。 
     form:指向当前字段所属表单的指针;只读。
     name:当前字段的名称。 
     readOnly:布尔值,表示当前字段是否只读。 
     tabIndex:表示当前字段的切换(tab)序号。
     type:当前字段的类型,如"checkbox"、"radio",等等。 
     value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件 在计算机中的路径。 除了 form 属性之外,可以通过 JavaScript动态修改其他任何属性。来看下面的例子: 
     var form = document.getElementById("myForm"); 
     var field = form.elements[0]; 
     //修改 value 属性 
     field.value = "Another value"; 
     //检查 form 属性的值 
     alert(field.form === form); //true 
     //把焦点设置到当前字段
      field.focus(); 
     //禁用当前字段
      field.disabled = true; 
     //修改 type 属性(不推荐,但对<input>来说是可行的) 
     field.type = "checkbox";     
     能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。例如,很 多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。 为此,常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件,并在该事件 发生时禁用提交按钮即可。以下就是这样一个例子。 
     //避免多次提交表单 
      EventUtil.addHandler(form, "submit", function(event){
          event = EventUtil.getEvent(event);
          var target = EventUtil.getTarget(event); 
     //取得提交按钮
     var btn = target.elements["submit-btn"]; 
     //禁用它
     btn.disabled = true;
});      
     以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后,代码取得了提交按钮 并将其 disabled 属性设置为 true。注意,不能通过 onclick 事件处理程序来实现这个功能,原 因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的 submit 事件之前触发 click 事件, 而有的浏览器则相反。对于先触发 click 事件的浏览器,意味着会在提交发生之前禁用按钮,结果 永远都不会提交表单。因此,好是通过 submit 事件来禁用提交按钮。不过,这种方式不适合表 单中不包含提交按钮的情况;如前所述,只有在包含提交按钮的情况下,才有可能触发表单的 submit 事件。
      除了<fieldset>之外,所有表单字段都有 type 属性。对于<input>元素,这个值等于 HTML特 性 type 的值。对于其他元素,这个 type 属性的值如下表所列。 
说 明 HTML示例 type属性的值
单选列表 <select>...</select> "select-one"
多选列表 <select multiple>...</select> "select-multiple"
自定义按钮 <button>...</button> "submit"
自定义非提交按钮 <button type="button">...</button> "button"
自定义重置按钮 <button type="reset">...</buton> "reset"
自定义提交按钮 <button type="submit">...</buton> "submit"
     
此外,<input>和<button>元素的 type 属性是可以动态修改的,而<select>元素的 type 属性 则是只读的。 
     2. 共有的表单字段方法
     每个表单字段都有两个方法:focus()和 blur()。其中,focus()方法用于将浏览器的焦点设置 到表单字段,即激活表单字段,使其可以响应键盘事件。例如,接收到焦点的文本框会显示插入符号, 随时可以接收输入。使用 focus()方法,可以将用户的注意力吸引到页面中的某个部位。例如,在页面 加载完毕后,将焦点转移到表单中的第一个字段。为此,可以侦听页面的 load 事件,并在该事件发生 时在表单的第一个字段上调用 focus()方法,如下面的例子所示。     
     EventUtil.addHandler(window, "load", function(event){ 
          document.forms[0].elements[0].focus();
      }); 
     要注意的是,如果第一个表单字段是一个<input>元素,且其 type 特性的值为"hidden",那么 以上代码会导致错误。另外,如果使用 CSS的 display 和 visibility 属性隐藏了该字段,同样也会 导致错误。 
     HTML5为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性, 不用 JavaScript就能自动把焦点移动到相应字段。例如: 
     <input type="text" autofocus>
     为了保证前面的代码在设置 autofocus 的浏览器中正常运行,必须先检测是否设置了该属性,如 果设置了,就不用再调用 focus()了。 
     EventUtil.addHandler(window, "load", function(event){
           var element = document.forms[0].elements[0]; 
           if (element.autofocus !== true){ 
               element.focus(); console.log("JS focus"); 
       } 
     });     
因为 autofocus 是一个布尔值属性,所以在支持的浏览器中它的值应该是 true。(在不支持的浏 览器中,它的值将是空字符串。)为此,上面的代码只有在 autofocus 不等于 true 的情况下才会调用 focus(),从而保证向前兼容。支持 autofocus 属性的浏览器有 Firefox 4+、Safari 5+、Chrome和 Opera 9.6。 
     在此南昌网站制作公司百恒网络前端开发工程师认为在默认情况下,只有表单字段可以获得焦点。对于其他元素而言,如果先将其 tabIndex 属性设置为1,然后再调用 focus()方法,也可以让这些元素获得焦点。 只有 Opera不支持这种技术。 
     与 focus()方法相对的是 blur()方法,它的作用是从元素中移走焦点。在调用 blur()方法时, 并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已。在早期 Web 开发中,那时候的表单字段还没有 readonly 特性,因此就可以使用 blur()方法来创建只读字段。 现在,虽然需要使用 blur()的场合不多了,但必要时还可以使用的。用法如下: 
     document.forms[0].elements[0].blur();     
3. 共有的表单字段事件
     除了支持鼠标、键盘、更改和 HTML事件之外,所有表单字段都支持下列 3个事件。 
     blur:当前字段失去焦点时触发。 
     change:对于<input>和<textarea>元素,在它们失去焦点且 value 值改变时触发;对于 <select>元素,在其选项改变时触发。 
     focus:当前字段获得焦点时触发。 
     当用户改变了当前字段的焦点,或者我们调用了 blur()或 focus()方法时,都可以触发 blur 和 focus 事件。这两个事件在所有表单字段中都是相同的。但是,change 事件在不同表单控件中触发的 次数会有所不同。对于<input>和<textarea>元素,当它们从获得焦点到失去焦点且 value 值改变时, 才会触发 change 事件。对于<select>元素,只要用户选择了不同的选项,就会触发 change 事件; 换句话说,不失去焦点也会触发 change 事件。 
     通常,可以使用 focus 和 blur 事件来以某种方式改变用户界面,要么是向用户给出视觉提示,要 么是向界面中添加额外的功能(例如,为文本框显示一个下拉选项菜单)。而 change 事件则经常用于 验证用户在字段中输入的数据。例如,假设有一个文本框,我们只允许用户输入数值。此时,可以利用 focus 事件修改文本框的背景颜色,以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复 文本框的背景颜色,利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实 现上述功能的代码。 

     <!DOCTYPE html>
<html>
<head>
     <title>Form Field Events Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
     <p>The textbox will receive focus as soon as the page loads. You can then start typing.</p>
     <form method="post" action="javascript:alert('Form submitted!')" id="myForm"> 
          <div>
          <label for="comments">Type numbers:</label><br />
          <input type="text" id="txtNumbers" name="numbers" />
</div>
<input type="submit" value="Submit Form" id="submit-btn" />
     </form> 
     <script type="text/javascript">
          EventUtil.addHandler(window, "load", function(event){
               var textbox = document.forms[0].elements[0];

          EventUtil.addHandler(textbox, "focus", function(event){
               event = EventUtil.getEvent(event);
               var target = EventUtil.getTarget(event);

               target.style.backgroundColor = "yellow";
          });
      EventUtil.addHandler(textbox, "blur", function(event){
          event = EventUtil.getEvent(event);
          var target = EventUtil.getTarget(event);

     if (/[^d]/.test(target.value)){
          target.style.backgroundColor = "red";
     } else {
          target.style.backgroundColor = "";
     }
     });
      EventUtil.addHandler(textbox, "change", function(event){
          event = EventUtil.getEvent(event);
          var target = EventUtil.getTarget(event);

          if (/[^d]/.test(target.value)){
               target.style.backgroundColor = "red";
          } else {
               target.style.backgroundColor = "";
          }
          });
           textbox.focus();
     }); 
      
     </script>
</body>
</html>
     在此,南昌网站建设公司百恒网络前端开发工程师提配大家onfocus 事件处理程序将文本框的背景颜色修改为黄色,以清楚地表明当前字段已经激活。 随后,onblur 和 onchange 事件处理程序则会在发现非数值字符时,将文本框背景颜色修改为红色。 为了测试用户输入的是不是非数值,这里针对文本框的 value 属性使用了简单的正则表达式。而且, 为确保无论文本框的值如何变化,验证规则始终如一,onblur 和 onchange 事件处理程序中使用了相 同的正则表达式。 
     
关于 blur 和 change 事件的关系,并没有严格的规定。在某些浏览器中,blur 事件会先于 change 事件发生;而在其他浏览器中,则恰好相反。为此,不能假定这 两个事件总会以某种顺序依次触发,这一点要特别注意。 
   本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-百恒网络 http://www.jxbh.cn/ 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×