• JavaScript表单处理（下）

    内容提纲：

    1.文本框脚本

    2.选择框脚本

    发文不易，转载请亲注明链接出处，谢谢！

     

    一．文本框脚本

    在HTML中，有两种方式来表现文本框：

    一种是单行文本框<input type="text">；

    一种是多行文本框<textarea>。

    虽然在HTML中<input>有value值，而<textarea>却没有，但在ＪＳ中都可以通过value获取他们的值。

           var textField = fm.elements[0];

           var areaField = fm.elements[1];

           alert(textField.value + ',' + areaField.value);        //得到value值

     

    PS：使用表单的value是最推荐使用的，它是HTML DOM中的属性，不建议使用标准DOM的方法。也就是说不要使用getAttribute()获取value值。原因很简单，浏览器兼容有问题而且，对value属性的修改，不一定会反映在DOM中。

    alert(areaField.getAttribute('value'));    //兼容性会有问题，IE可以获取，非IE获取不到

    alert(textField.getAttribute('value'));     //标准DOM无法获取更改后的value

     

    除了value值，还有一个属性对应的是defaultValue，可以得到原本的value值，不会因为值的改变而变化。

    alert(textField.defaultValue);                             //得到最初的value值

     

    选择文本

    使用select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中。

    textField.select();                                             //选中文本框中的文本

     

    选择部分文本

    在使用文本框内容的时候，我们有时要直接选定部分文本，这个行为还没有标准。Firefox的解决方案是：setSelectionRange()方法。这个方法接受两个参数：索引和长度。

    textField.setSelectionRange(0,1);                                     //选择第一个字符

    textField.focus();                                              //焦点移入（这样可以修改里面的文本）

     

           textField.setSelectionRange(0, textField.value.length);              //选择全部

           textField.focus();                                                            //焦点移入    

     

    除了IE，其他浏览器都支持这种写法(IE9+支持)，那么IE想要选择部分文本，可以使用IE的范围操作。

           var range = textField.createTextRange();             //创建一个文本范围对象

           range.collapse(true);                                         //将指针移到起点

           range.moveStart('character', 0);                          //移动起点，character表示逐字移动

           range.moveEnd('character', 1);                           //移动终点，同上

           range.select();                                                  //焦点选定

     

    PS：关于IE范围这儿不详细讲解。并且W3C也有自己的范围。

    PS：非IE从第N个到第M个位置，IE是从第N个开始选择M个。

    //选择部分文本实现跨浏览器兼容

     1 function selectText(text, start, stop) {
 2 
 3        if (text.setSelectionRange) {
 4 
 5               text.setSelectionRange(start, stop);
 6 
 7               text.focus();
 8 
 9        } else if (text.createTextRange) {
10 
11               var range = text.createTextRange();
12 
13               range.collapse(true);
14 
15               range.moveStart('character', start);
16 
17               range.moveEnd('character', stop - start);              //IE用终点减去起点得到字符数
18 
19               range.select();
20 
21        }
22 
23 }
24 
25

    使用select事件，可以选中文本框文本后触发，得到文本框中的全部文本（取得选择的文本见下一部分）。

           addEvent(textField, 'select', function () {

                  alert(this.value);                   //得到全部文本，IE事件需要传递this才可以这么写

           });

     

    取得选择的文本

    如果我们想要取得选择的那个文本，就必须使用一些手段。目前为止，没有任何规范解决这个问题。Firefox为文本框提供了两个属性：selectionStart和selectionEnd。

           addEvent(textField, 'select', function () {

                  alert(this.value.substring(this.selectionStart, this.selectionEnd));

           });

     

    除了IE，其他浏览器均支持这两个属性（IE9+已支持）。IE不支持，而提供了另一个方案：selection对象，属于document。这个对象保存着用户在整个文档范围内选择的文本信息。

    //浏览器兼容

     1 function getSelectText(text) {
 2 
 3        if (typeof text.selectionStart == 'number') {  //非IE
 4 
 5               return text.value.substring(text.selectionStart, text.selectionEnd);
 6 
 7        } else if (document.selection) {                   //IE
 8 
 9               return document.selection.createRange().text;  //获取IE选择的文本
10 
11        }
12 
13 }

    PS：有一个最大的问题，就是IE在触发select事件的时候，在选择一个字符后立即触发，而其他浏览器是选择想要的字符释放鼠标键后才触发。所以，如果使用alert()的话，导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一，但可以通过不去使用alert()来解决。

           addEvent(textField, 'select', function () {

                  //alert(getSelectText(this));                         //导致用户行为结果不一致（不这样用）

                  document.getElementById('box').innerHTML = getSelectText(this); //this指代textField

           });

     

    综合小案例：

    html代码部分：

     1 <body>
 2 
 3 <form id="myForm" name="yourForm">
 4 
 5        姓名：<input type="text" name="user" value="text" /><br />
 6 
 7        <p id="pox"></p>
 8 
 9        <textarea name="content">textarea</textarea>
10 
11 </form>
12 
13 </body>

    JS代码部分：

     1 addEvent(window, 'load', function () {
 2 
 3        var fm = document.getElementById('myForm');
 4 
 5        var user = fm.elements['user'];
 6 
 7        var content = fm.elements['content'];
 8 
 9       
10 
11        //select 事件
12 
13        addEvent(user, 'select', function () {
14 
15               document.getElementById('pox').innerHTML = getSelectText(user);
16 
17        });
18 
19       
20 
21        function getSelectText(text) {
22 
23               if (typeof text.selectionStart == 'number') {
24 
25                      return text.value.substring(text.selectionStart, text.selectionEnd);
26 
27               } else if (document.selection) {
28 
29                      return document.selection.createRange().text;
30 
31               }
32 
33        }
34 
35 });

    过滤输入

    过滤输入的两种模式（以纯数字为例）：

    1. 禁止和屏蔽非数字键的输入，阻止非数字键的默认行为；
    2. 验证后取消，可以先输入非法字符，判断后取消非法字符文本。

           法1：屏蔽非数字键输入

    　　addEvent(areaField, 'keypress', function (evt) {

                  var e = evt || window.event;

                  var charCode = getCharCode(evt);              // getCharCode()跨浏览器获取字符编码(事件对象篇)

                  if (!/d/.test(String.fromCharCode(charCode)) && charCode > 8) {  //条件阻止默认

                         preDef(evt);

                  }

           });

     

    PS：前半段条件判断只有数字才可以输入，导致常规按键，比如光标键、退格键、删除键等无法使用。部分浏览器比如Firefox，需要解放这些键，而非字符触发的编码均为0；在Safari3之前的浏览器，也会被阻止，而它对应的字符编码全部为8，所以最后就加上charCode > 8的判断即可。

    PS：当然，这种过滤还是比较脆弱的，我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。

     

    如果要阻止裁剪、复制和粘贴，那么我们可以在剪贴板相关的事件上进行处理，JavaScript提供了六组剪贴板相关的事件：

    事件名

    说明

    copy

    在发生复制操作时触发

    cut

    在发生裁剪操作时触发

    paste

    在发生粘贴操作时触发

    beforecopy

    在发生复制操作前触发

    beforecut

    在发生裁剪操作前触发

    beforepaste

    在发生粘贴操作前触发

     

    由于剪贴板没有标准，导致不同的浏览器有不同的解释。Safari、Chrome和Firefox中，凡是before前缀的事件，都需要在特定条件下触发。而IE则会在操作时之前触发带before前缀的事件。

    如果我们想要禁用裁剪、复制、粘贴，那么只要阻止默认行为即可。

           

     1     addEvent(areaField, 'cut', function (evt) {           //阻止裁剪
 2 
 3               preDef(evt);
 4 
 5        });
 6 
 7        addEvent(areaField, 'copy', function (evt) {         //阻止复制
 8 
 9               preDef(evt);
10 
11        });
12 
13        addEvent(areaField, 'paste', function (evt) {        //阻止粘贴
14 
15               preDef(evt);
16 
17        });

     

    PS：当我们裁剪和复制的时候，我们可以访问剪贴板里的内容，但问题是FireFox，Opera浏览器不支持访问剪贴板。并且，不同的浏览器也有自己不同的理解。所以，这里我们就不在赘述。

     

    最后一个问题影响到可能会影响输入的因素就是：输入法。我们知道，中文输入法，它的原理是在输入法面板上先存储文本，按下回车就写入英文文本，按下空格就写入中文文本。

    有一种解决方案是通过CSS来禁止调出输入法：

    style="ime-mode:disabled"                                //CSS直接编写

    areaField.style.imeMode = 'disabled';                  //或在JS里设置也可以

     

    PS：但Chrome浏览器却无法禁止输入法调出。所以，为了解决Chrome浏览器的问题，最好还要使用正则验证已输入的文本。

    //法2：验证后取消（建议使用）

           addEvent(areaField, 'keyup', function (evt) {            //keyup弹起的时候

                  this.value = this.value.replace(/[^d]/g, '');    //把非数字都替换成空

           });

     

    自动切换焦点

    为了增加表单字段的易用性，很多字段在满足一定条件时(比如长度)，就会自动切换到下一个字段上继续填写。

           

    1 　　　　<input type="text" name="user1" maxlength="1" />   //只能写1个
2 
3        <input type="text" name="user2" maxlength="2" />   //只能写2个
4 
5        <input type="text" name="user3" maxlength="3" />   //只能写3个

          

     1 //自动切换焦点
 2 
 3 addEvent(fm.elements['a1'], 'keyup', tabForWard);
 4 
 5 addEvent(fm.elements['a2'], 'keyup', tabForWard);
 6 
 7 addEvent(fm.elements['a3'], 'keyup', tabForWard);
 8 
 9       
10 
11        function tabForward (evt) {                                     
12 
13               var e = evt || window.event;
14 
15               var target = getTarget(evt);
16 
17               //判断当前长度是否和指定长度一致
18 
19               if (target.value.length == target.maxLength) {    
20 
21 　　　　　　　　　　　　//遍历所有字段
22 
23                      for (var i =0; i < fm.elements.length; i ++) {
24 
25 　　　　　　　　　　　　　　　　//找到当前字段
26 
27                             if (fm.elements[i] == target) {
28 
29 　　　　　　　　　　　　　　　　　　//就把焦点移入下一个
30 
31                                    fm.elements[i + 1].focus();
32 
33 　　　　　　　　　　　　　　　　　　　　//中途返回
34 
35                                    return;           
36 
37                             }
38 
39                      }
40 
41               }
42 
43        }
44 
45

    二．选择框脚本

    下面内容基于以下HTML代码：

     1 <body>
 2 
 3 <form id="myForm" name="yourForm">
 4 
 5        <select name="city">
 6 
 7               <option value="上海v">上海t</option>
 8 
 9               <option value="南京v">南京t</option>
10 
11               <option value="杭州v">杭州t</option>
12 
13               <option>无</option>
14 
15        </select>
16 
17 </form>

    选择框是通过<select>和<option>元素创建的，除了通用的一些属性和方法外，HTMLSelectElement类型还提供了如下的属性和方法：

    HTMLSelectElement对象

    属性/方法

    说明

    add(new,rel)

    插入新元素，并指定位置

    multiple

    布尔值，是否允许多项选择

    options

    <option>元素的HTMLColletion集合

    remove(index)

    移除给定位置的选项

    selectedIndex

    基于0的选中项的索引，如果没有选中项，则值为-1

    size

    选择框中可见的行数

     

    在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

    HTMLOptionElement对象

    属性

    说明

    index

    当前选项在options集合中的索引

    label

    当前选项的标签

    selected

    布尔值，表示当前选项是否被选中

    text

    选项的文本

    value

    选项的值

     

    var city = fm.elements['city'];                                   //HTMLSelectElement

    alert(city.options);                                            　　//HTMLOptionsCollection

    alert(city.options[0]);                                       　　 //HTMLOptionElement

    alert(city.type);                                              　　  //select-one

     

    PS：选择框里的type属性有可能是：select-one，也有可能是：select-multiple，这取决于HTML代码中有没有multiple属性。

     

    标准DOM方法（不推荐）：

    alert(city.options[0].firstChild.nodeValue);          //上海t，获取text值，不推荐的做法

    alert(city.options[0].getAttribute('value'));           //上海v，获取value值，不推荐的做法

    HTML DOM 方法（推荐）：

    alert(city.options[0].text);                                 //上海t，获取text值，推荐

    alert(city.options[0].value);                               //上海v，获取value值，推荐

    PS：操作select时，最好使用HTML DOM，因为所有浏览器兼容的很好。而如果使用标准DOM，会因为不同的浏览器导致不同的结果。

    PS：当选项没有value值的时候，IE会返回空字符串，其他浏览器会返回text值。

     

    选择选项

    对于只能选择一项的选择框，使用selectedIndex属性最为简单。

           addEvent(city, 'change', function () {

                  alert(this.selectedIndex);                                   //得到当前选项的索引，从0开始

    alert(this.options[this.selectedIndex].text);   //得到当前选项的text值

    alert(this.options[this.selectedIndex].value); //得到当前选项的value值

           });

    PS：如果是多项选择，他始终返回的是第一个项。

     

    city.selectedIndex = 1;                                      //设置selectedIndex可以定位到某个索引

     

    通过option的属性(布尔值)selected，也可以设置某个索引，设置为true即可。

    city.options[0].selected = true;                           //设置第一个索引

     

    而selected（作用在option对象上）和selectedIndex（作用在select对象上）在用途上最大的区别是：selected是返回的布尔值，所以一般用于判断上；而selectedIndex是数值，一般用于设置和获取。

           addEvent(city, 'change', function () {

                  if (this.options[2].selected == true) {           //判断第三个选项是否被选定

                         alert('选择正确！');

                  }

           });

     

    添加选项

    如需动态的添加选项我们有两种方案：标准DOM和Option构造函数。

    使用标准DOM添加：

           var option = document.createElement('option');

           option.appendChild(document.createTextNode('北京t'));

           option.setAttribute('value', '北京v')

           city.appendChild(option);

     

    使用Option构造函数添加：

    　　var option = new Option('北京t', '北京v');

    　　city.appendChild(option);                                  //IE出现bug

     

    使用add()方法来添加：

    　　var option = new Option('北京t', '北京v');

    　　city.add(option, 0);                                           //0，表示添加到第一位

     

    PS：DOM规定，add()中两个参数是必须的，如果不确定索引，那么第二个参数设置null即可，即默认移入最后一个选项。但IE中规定第二个参数是可选的，所以设置null表示放入不存在的位置，导致失踪，为了兼容性，我们传递undefined即可兼容。

    city.add(option, null);                                       //IE不显示了

    city.add(option, undefined);                                  //最佳兼容方案

     

    移除选项

    有三种方式可以移除某一个选项：DOM移除、remove()方法移除和null移除。

    city.removeChild(city.options[0]);                      //DOM移除

    city.remove(0);                                                //remove()移除，推荐

    city.options[0] = null;                                       //null移除

     

    PS：当第一项移除后，下面的项会自动往上移动，所以不停的移除第一项，即可全部移除。

     

    移动选项

    如果有两个选择框，把第一个选择框里的第一项移到第二个选择框里，并且第一个选择框里的第一项被移除。

    var city = fm.elements['city'];                                   //第一个选择框

    var info = fm.elements['info'];                           //第二个选择框

    info.appendChild(city.options[0]);                         //移动，自我删除

     

     

    排列选项

    选择框提供了一个index属性，可以得到当前选项的索引值，和selectedIndex的区别是，selectedIndex是选择框对象（select）的调用，index是选项对象（option）的调用。

    var option1 = city.options[1];

    city.insertBefore(option1, city.options[option1.index - 1]);              //往下移动移位

     

    单选按钮

    通过checked属性来获取单选按钮的值。

           for (var i = 0; i < fm.sex.length; i ++) {                    //循环单选按钮

                  if (fm.sex[i].checked == true) {                 //遍历每一个找出选中的那个

                         alert(fm.sex[i].value);                         //得到值

                  }

           }

     

    PS：除了checked属性之外，单选按钮还有一个defaultChecked属性，它获取的是原本的checked按钮对象，而不会因为checked的改变而改变。

           if (fm.sex[i].defaultChecked == true) {

                  alert(fm.sex[i].value);

           }

     

    复选按钮

    通过checked属性来获取复选按钮的值。复选按钮也具有defaultChecked属性。

           var love = '';

           for (var i = 0; i < fm.love.length; i ++) {

                  if (fm.love[i].checked == true) {

                         love += fm.love[i].value;

                  }

           }

           alert(love);

     

    For my lover and 

    Thank you ,Mr.Lee!

    ---恢复内容结束---

    内容提纲：

    1.文本框脚本

    2.选择框脚本

    发文不易，转载请亲注明链接出处，谢谢！

     

    一．文本框脚本

    在HTML中，有两种方式来表现文本框：

    一种是单行文本框<input type="text">；

    一种是多行文本框<textarea>。

    虽然在HTML中<input>有value值，而<textarea>却没有，但在ＪＳ中都可以通过value获取他们的值。

           var textField = fm.elements[0];

           var areaField = fm.elements[1];

           alert(textField.value + ',' + areaField.value);        //得到value值

     

    PS：使用表单的value是最推荐使用的，它是HTML DOM中的属性，不建议使用标准DOM的方法。也就是说不要使用getAttribute()获取value值。原因很简单，浏览器兼容有问题而且，对value属性的修改，不一定会反映在DOM中。

    alert(areaField.getAttribute('value'));    //兼容性会有问题，IE可以获取，非IE获取不到

    alert(textField.getAttribute('value'));     //标准DOM无法获取更改后的value

     

    除了value值，还有一个属性对应的是defaultValue，可以得到原本的value值，不会因为值的改变而变化。

    alert(textField.defaultValue);                             //得到最初的value值

     

    选择文本

    使用select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中。

    textField.select();                                             //选中文本框中的文本

     

    选择部分文本

    在使用文本框内容的时候，我们有时要直接选定部分文本，这个行为还没有标准。Firefox的解决方案是：setSelectionRange()方法。这个方法接受两个参数：索引和长度。

    textField.setSelectionRange(0,1);                                     //选择第一个字符

    textField.focus();                                              //焦点移入（这样可以修改里面的文本）

     

           textField.setSelectionRange(0, textField.value.length);              //选择全部

           textField.focus();                                                            //焦点移入    

     

    除了IE，其他浏览器都支持这种写法(IE9+支持)，那么IE想要选择部分文本，可以使用IE的范围操作。

           var range = textField.createTextRange();             //创建一个文本范围对象

           range.collapse(true);                                         //将指针移到起点

           range.moveStart('character', 0);                          //移动起点，character表示逐字移动

           range.moveEnd('character', 1);                           //移动终点，同上

           range.select();                                                  //焦点选定

     

    PS：关于IE范围这儿不详细讲解。并且W3C也有自己的范围。

    PS：非IE从第N个到第M个位置，IE是从第N个开始选择M个。

    //选择部分文本实现跨浏览器兼容

     1 function selectText(text, start, stop) {
 2 
 3        if (text.setSelectionRange) {
 4 
 5               text.setSelectionRange(start, stop);
 6 
 7               text.focus();
 8 
 9        } else if (text.createTextRange) {
10 
11               var range = text.createTextRange();
12 
13               range.collapse(true);
14 
15               range.moveStart('character', start);
16 
17               range.moveEnd('character', stop - start);              //IE用终点减去起点得到字符数
18 
19               range.select();
20 
21        }
22 
23 }
24 
25

    使用select事件，可以选中文本框文本后触发，得到文本框中的全部文本（取得选择的文本见下一部分）。

           addEvent(textField, 'select', function () {

                  alert(this.value);                   //得到全部文本，IE事件需要传递this才可以这么写

           });

     

    取得选择的文本

    如果我们想要取得选择的那个文本，就必须使用一些手段。目前为止，没有任何规范解决这个问题。Firefox为文本框提供了两个属性：selectionStart和selectionEnd。

           addEvent(textField, 'select', function () {

                  alert(this.value.substring(this.selectionStart, this.selectionEnd));

           });

     

    除了IE，其他浏览器均支持这两个属性（IE9+已支持）。IE不支持，而提供了另一个方案：selection对象，属于document。这个对象保存着用户在整个文档范围内选择的文本信息。

    //浏览器兼容

     1 function getSelectText(text) {
 2 
 3        if (typeof text.selectionStart == 'number') {  //非IE
 4 
 5               return text.value.substring(text.selectionStart, text.selectionEnd);
 6 
 7        } else if (document.selection) {                   //IE
 8 
 9               return document.selection.createRange().text;  //获取IE选择的文本
10 
11        }
12 
13 }

    PS：有一个最大的问题，就是IE在触发select事件的时候，在选择一个字符后立即触发，而其他浏览器是选择想要的字符释放鼠标键后才触发。所以，如果使用alert()的话，导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一，但可以通过不去使用alert()来解决。

           addEvent(textField, 'select', function () {

                  //alert(getSelectText(this));                         //导致用户行为结果不一致（不这样用）

                  document.getElementById('box').innerHTML = getSelectText(this); //this指代textField

           });

     

    综合小案例：

    html代码部分：

     1 <body>
 2 
 3 <form id="myForm" name="yourForm">
 4 
 5        姓名：<input type="text" name="user" value="text" /><br />
 6 
 7        <p id="pox"></p>
 8 
 9        <textarea name="content">textarea</textarea>
10 
11 </form>
12 
13 </body>

    JS代码部分：

     1 addEvent(window, 'load', function () {
 2 
 3        var fm = document.getElementById('myForm');
 4 
 5        var user = fm.elements['user'];
 6 
 7        var content = fm.elements['content'];
 8 
 9       
10 
11        //select 事件
12 
13        addEvent(user, 'select', function () {
14 
15               document.getElementById('pox').innerHTML = getSelectText(user);
16 
17        });
18 
19       
20 
21        function getSelectText(text) {
22 
23               if (typeof text.selectionStart == 'number') {
24 
25                      return text.value.substring(text.selectionStart, text.selectionEnd);
26 
27               } else if (document.selection) {
28 
29                      return document.selection.createRange().text;
30 
31               }
32 
33        }
34 
35 });

    过滤输入

    过滤输入的两种模式（以纯数字为例）：

    1. 禁止和屏蔽非数字键的输入，阻止非数字键的默认行为；
    2. 验证后取消，可以先输入非法字符，判断后取消非法字符文本。

           法1：屏蔽非数字键输入

    　　addEvent(areaField, 'keypress', function (evt) {

                  var e = evt || window.event;

                  var charCode = getCharCode(evt);              // getCharCode()跨浏览器获取字符编码(事件对象篇)

                  if (!/d/.test(String.fromCharCode(charCode)) && charCode > 8) {  //条件阻止默认

                         preDef(evt);

                  }

           });

     

    PS：前半段条件判断只有数字才可以输入，导致常规按键，比如光标键、退格键、删除键等无法使用。部分浏览器比如Firefox，需要解放这些键，而非字符触发的编码均为0；在Safari3之前的浏览器，也会被阻止，而它对应的字符编码全部为8，所以最后就加上charCode > 8的判断即可。

    PS：当然，这种过滤还是比较脆弱的，我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。

     

    如果要阻止裁剪、复制和粘贴，那么我们可以在剪贴板相关的事件上进行处理，JavaScript提供了六组剪贴板相关的事件：

    事件名

    说明

    copy

    在发生复制操作时触发

    cut

    在发生裁剪操作时触发

    paste

    在发生粘贴操作时触发

    beforecopy

    在发生复制操作前触发

    beforecut

    在发生裁剪操作前触发

    beforepaste

    在发生粘贴操作前触发

     

    由于剪贴板没有标准，导致不同的浏览器有不同的解释。Safari、Chrome和Firefox中，凡是before前缀的事件，都需要在特定条件下触发。而IE则会在操作时之前触发带before前缀的事件。

    如果我们想要禁用裁剪、复制、粘贴，那么只要阻止默认行为即可。

           

     1     addEvent(areaField, 'cut', function (evt) {           //阻止裁剪
 2 
 3               preDef(evt);
 4 
 5        });
 6 
 7        addEvent(areaField, 'copy', function (evt) {         //阻止复制
 8 
 9               preDef(evt);
10 
11        });
12 
13        addEvent(areaField, 'paste', function (evt) {        //阻止粘贴
14 
15               preDef(evt);
16 
17        });

     

    PS：当我们裁剪和复制的时候，我们可以访问剪贴板里的内容，但问题是FireFox，Opera浏览器不支持访问剪贴板。并且，不同的浏览器也有自己不同的理解。所以，这里我们就不在赘述。

     

    最后一个问题影响到可能会影响输入的因素就是：输入法。我们知道，中文输入法，它的原理是在输入法面板上先存储文本，按下回车就写入英文文本，按下空格就写入中文文本。

    有一种解决方案是通过CSS来禁止调出输入法：

    style="ime-mode:disabled"                                //CSS直接编写

    areaField.style.imeMode = 'disabled';                  //或在JS里设置也可以

     

    PS：但Chrome浏览器却无法禁止输入法调出。所以，为了解决Chrome浏览器的问题，最好还要使用正则验证已输入的文本。

    //法2：验证后取消（建议使用）

           addEvent(areaField, 'keyup', function (evt) {            //keyup弹起的时候

                  this.value = this.value.replace(/[^d]/g, '');    //把非数字都替换成空

           });

     

    自动切换焦点

    为了增加表单字段的易用性，很多字段在满足一定条件时(比如长度)，就会自动切换到下一个字段上继续填写。

           

    1 　　　　<input type="text" name="user1" maxlength="1" />   //只能写1个
2 
3        <input type="text" name="user2" maxlength="2" />   //只能写2个
4 
5        <input type="text" name="user3" maxlength="3" />   //只能写3个

          

     1 //自动切换焦点
 2 
 3 addEvent(fm.elements['a1'], 'keyup', tabForWard);
 4 
 5 addEvent(fm.elements['a2'], 'keyup', tabForWard);
 6 
 7 addEvent(fm.elements['a3'], 'keyup', tabForWard);
 8 
 9       
10 
11        function tabForward (evt) {                                     
12 
13               var e = evt || window.event;
14 
15               var target = getTarget(evt);
16 
17               //判断当前长度是否和指定长度一致
18 
19               if (target.value.length == target.maxLength) {    
20 
21 　　　　　　　　　　　　//遍历所有字段
22 
23                      for (var i =0; i < fm.elements.length; i ++) {
24 
25 　　　　　　　　　　　　　　　　//找到当前字段
26 
27                             if (fm.elements[i] == target) {
28 
29 　　　　　　　　　　　　　　　　　　//就把焦点移入下一个
30 
31                                    fm.elements[i + 1].focus();
32 
33 　　　　　　　　　　　　　　　　　　　　//中途返回
34 
35                                    return;           
36 
37                             }
38 
39                      }
40 
41               }
42 
43        }
44 
45

    二．选择框脚本

    下面内容基于以下HTML代码：

     1 <body>
 2 
 3 <form id="myForm" name="yourForm">
 4 
 5        <select name="city">
 6 
 7               <option value="上海v">上海t</option>
 8 
 9               <option value="南京v">南京t</option>
10 
11               <option value="杭州v">杭州t</option>
12 
13               <option>无</option>
14 
15        </select>
16 
17 </form>

    选择框是通过<select>和<option>元素创建的，除了通用的一些属性和方法外，HTMLSelectElement类型还提供了如下的属性和方法：

    HTMLSelectElement对象

    属性/方法

    说明

    add(new,rel)

    插入新元素，并指定位置

    multiple

    布尔值，是否允许多项选择

    options

    <option>元素的HTMLColletion集合

    remove(index)

    移除给定位置的选项

    selectedIndex

    基于0的选中项的索引，如果没有选中项，则值为-1

    size

    选择框中可见的行数

     

    在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

    HTMLOptionElement对象

    属性

    说明

    index

    当前选项在options集合中的索引

    label

    当前选项的标签

    selected

    布尔值，表示当前选项是否被选中

    text

    选项的文本

    value

    选项的值

     

    var city = fm.elements['city'];                                   //HTMLSelectElement

    alert(city.options);                                            　　//HTMLOptionsCollection

    alert(city.options[0]);                                       　　 //HTMLOptionElement

    alert(city.type);                                              　　  //select-one

     

    PS：选择框里的type属性有可能是：select-one，也有可能是：select-multiple，这取决于HTML代码中有没有multiple属性。

     

    标准DOM方法（不推荐）：

    alert(city.options[0].firstChild.nodeValue);          //上海t，获取text值，不推荐的做法

    alert(city.options[0].getAttribute('value'));           //上海v，获取value值，不推荐的做法

    HTML DOM 方法（推荐）：

    alert(city.options[0].text);                                 //上海t，获取text值，推荐

    alert(city.options[0].value);                               //上海v，获取value值，推荐

    PS：操作select时，最好使用HTML DOM，因为所有浏览器兼容的很好。而如果使用标准DOM，会因为不同的浏览器导致不同的结果。

    PS：当选项没有value值的时候，IE会返回空字符串，其他浏览器会返回text值。

     

    选择选项

    对于只能选择一项的选择框，使用selectedIndex属性最为简单。

           addEvent(city, 'change', function () {

                  alert(this.selectedIndex);                                   //得到当前选项的索引，从0开始

    alert(this.options[this.selectedIndex].text);   //得到当前选项的text值

    alert(this.options[this.selectedIndex].value); //得到当前选项的value值

           });

    PS：如果是多项选择，他始终返回的是第一个项。

     

    city.selectedIndex = 1;                                      //设置selectedIndex可以定位到某个索引

     

    通过option的属性(布尔值)selected，也可以设置某个索引，设置为true即可。

    city.options[0].selected = true;                           //设置第一个索引

     

    而selected（作用在option对象上）和selectedIndex（作用在select对象上）在用途上最大的区别是：selected是返回的布尔值，所以一般用于判断上；而selectedIndex是数值，一般用于设置和获取。

           addEvent(city, 'change', function () {

                  if (this.options[2].selected == true) {           //判断第三个选项是否被选定

                         alert('选择正确！');

                  }

           });

     

    添加选项

    如需动态的添加选项我们有两种方案：标准DOM和Option构造函数。

    使用标准DOM添加：

           var option = document.createElement('option');

           option.appendChild(document.createTextNode('北京t'));

           option.setAttribute('value', '北京v')

           city.appendChild(option);

     

    使用Option构造函数添加：

    　　var option = new Option('北京t', '北京v');

    　　city.appendChild(option);                                  //IE出现bug

     

    使用add()方法来添加：

    　　var option = new Option('北京t', '北京v');

    　　city.add(option, 0);                                           //0，表示添加到第一位

     

    PS：DOM规定，add()中两个参数是必须的，如果不确定索引，那么第二个参数设置null即可，即默认移入最后一个选项。但IE中规定第二个参数是可选的，所以设置null表示放入不存在的位置，导致失踪，为了兼容性，我们传递undefined即可兼容。

    city.add(option, null);                                       //IE不显示了

    city.add(option, undefined);                                  //最佳兼容方案

     

    移除选项

    有三种方式可以移除某一个选项：DOM移除、remove()方法移除和null移除。

    city.removeChild(city.options[0]);                      //DOM移除

    city.remove(0);                                                //remove()移除，推荐

    city.options[0] = null;                                       //null移除

     

    PS：当第一项移除后，下面的项会自动往上移动，所以不停的移除第一项，即可全部移除。

     

    移动选项

    如果有两个选择框，把第一个选择框里的第一项移到第二个选择框里，并且第一个选择框里的第一项被移除。

    var city = fm.elements['city'];                                   //第一个选择框

    var info = fm.elements['info'];                           //第二个选择框

    info.appendChild(city.options[0]);                         //移动，自我删除

     

     

    排列选项

    选择框提供了一个index属性，可以得到当前选项的索引值，和selectedIndex的区别是，selectedIndex是选择框对象（select）的调用，index是选项对象（option）的调用。

    var option1 = city.options[1];

    city.insertBefore(option1, city.options[option1.index - 1]);              //往下移动移位

     

    单选按钮

    通过checked属性来获取单选按钮的值。

           for (var i = 0; i < fm.sex.length; i ++) {                    //循环单选按钮

                  if (fm.sex[i].checked == true) {                 //遍历每一个找出选中的那个

                         alert(fm.sex[i].value);                         //得到值

                  }

           }

     

    PS：除了checked属性之外，单选按钮还有一个defaultChecked属性，它获取的是原本的checked按钮对象，而不会因为checked的改变而改变。

           if (fm.sex[i].defaultChecked == true) {

                  alert(fm.sex[i].value);

           }

     

    复选按钮

    通过checked属性来获取复选按钮的值。复选按钮也具有defaultChecked属性。

           var love = '';

           for (var i = 0; i < fm.love.length; i ++) {

                  if (fm.love[i].checked == true) {

                         love += fm.love[i].value;

                  }

           }

           alert(love);

     

    For my lover and 

    Thank you ,Mr.Lee!
  • 相关阅读:
    sqlserver 脚本生成数据库文档
    在命令行中执行kms命令激活Microsoft Office 2010
    .NET Core项目修改project.json来引用其他目录下的源码等文件的办法 & 解决多框架时 project.json 与 app.config冲突的问题
    asp.net 访问局域网共享文件
    Winform开发框架的重要特性总结
    Winform开发框架之插件化应用框架实现
    Winform开发框架之权限管理系统的改进
    Winform开发框架之统计图表的实现
    在Winform开发框架中实现对数据库的加密支持
    Winform开发框架之通用高级查询模块
  • 原文地址：https://www.cnblogs.com/ttcc/p/3772024.html
Copyright © 2020-2023  润新知