标签：

一、眼中的表单

          在HTML中，表单是由<form>元素来表示的，在JavaScript中，表单对应的是HTMLFormElement类型。我们所用的表单就是在form中的各种控件组成。下面介绍一下它的字段和操作。

二、表单介绍几个重点                              

1、blur和change事件在不同浏览器中响应的先后顺序

          关于 blur 和 change 事件的关系，并没有严格的规定。blur 事件和change事件，一个是失去焦点，一个是改变选项。在某些浏览器中，blur 事件，会先于 change 事件发生；而在其他浏览器中，则恰好相反。例如：

<span style="font-size:14px;">addEvent(window,'load',function(){
    varfm=document.getElementById('myForm');
    varuser=fm.elements['user'];
 
    addEvent(user,'blur',function(){
       alert('blur');
    });
    addEvent(user,'change',function(){
       alert('change');
     });
});</span>

      不同的浏览器会有不同的反应顺序。但大多数浏览器还是先change后blur，小编试IE、FireFox、Google、and360.

2、提交表单

      提交数据最大的问题就是重复提交表单。 因为各种原因， 当一条数据提交到服务器的时候会出现延迟等长时间没反映， 用户以为浏览器没有反应，或者网速有问题，于是导致用户不停的点击提交， 从而使得重复提交了很多相同的请求，或造成错误、或写入数据库多条相同信息。

我们先做一个3秒钟的模拟延迟

<span style="font-size:14px;">addEvent(fm,'submit', function (evt) { //模拟延迟
preDef(evt);
setTimeout(function() {
fm.submit();
}, 3000);
});</span>

有两种方法可以解决这种问题：

      第一种就是提交之后， 立刻禁用点击按钮；

document.getElementById('sub').disabled= true; //将按钮禁用

      第二种就是提交之后取消后续的表单提交操作。

<span style="font-size:14px;">varflag = false //设置一个监听变量
if(flag == true) return //如果存在返回退出事件
flag = true; //否则确定是第一次，设置为 true</span>

三、跨浏览器处理

        实现选择form中输入框中的部分文本，会存在浏览器的兼容问题，解决方案：

<span style="font-size:14px;">//选择部分文本实现跨浏览器兼容
functionselectText(text, start, stop) {
   if(text.setSelectionRange) {
       text.setSelectionRange(start,stop);
       text.focus();
   } else if(text.createTextRange) {
       var range =text.createTextRange();
       range.collapse(true);
       range.moveStart('character',start);
       range.moveEnd('character',stop - start); //IE 用终点减去起点得到字符数
       range.select();
   }
}</span>

       使用 select 事件，可以选中文本框文本后触发。

<span style="font-size:14px;">addEvent(textField,'select', function () {
       alert(this.value); //IE 事件需要传递 this 才可以这么写
});</span>

       在JS中最让人头疼的就是浏览器的兼容问题，李炎恢老师在整个视频的讲解过程中也一直在解决浏览器的兼容问题。但这同时老师也在向我们传达一个道理，当你在一个浏览器下测试成功了，并不代表所有的用户都会使用这一个浏览器，如果用户在另外一个浏览器看到的完全是另一个样子，或者功能不能实现的时候，这就是我们做软件的失败了。所以，浏览器的兼容问题也在体现全心全意为人民服务的宗旨。

JS基础---表单处理

标签：

原文地址：http://blog.csdn.net/xdd19910505/article/details/42914791