JavaScript基础(5)之form表单-基本操作

表单作为与服务器端交互非常重要的一环，html中的表单虽然用的多，但是没有系统地去了解，在者详细了解form的各种特性

基本内容

在HTML中，表单是由元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。
HTMLFormElement也有它自己下列独有的属性和方法

属性	解释
acceptCharset	服务器能够处理的字符集；等价于HTML中的accept-charset
action	接收请求的URL
elements	表单中所有控件的集合
enctype	请求的编码类型；等价于HTML中的enctype特性
length	表单中控件的数量
name	表单的名称；等价于HTML的name特性
method	表单中所有控件的集合
reset()	将所有表单域重置为默认值
submit()	提交表单
target	用于发送请求和接收响应的窗口名称；等价于HTML的target特性
method	要发送的HTTP请求类型

获取表单

// 用id
var forms = document.getElementById('form');
// 用document.forms属性
var forms = document.forms  // 页面所有表单

提交表单

• 按钮提交

<!--通用按钮提交-->
<input type="submit" value="submit">
<!--自定义按钮提交-->
<button type="submit">submit</button>
<!--通用按钮提交-->
<input type="image" value="demo.png">

按钮提交的时候会触发submit事件，可以监听submit事件，进行表单验证，阻止默认行为就可以取消表单提交

• 直接调用submit()方法

var forms = document.getElementById('form');
forms.submit();

• 阻止表单重复提交

// 只提交一次
  <script type="text/javascript">
         var isCommitted = false;//表单是否已经提交标识，默认为false
         function dosubmit(){
              if(isCommitted==false){
                 isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
                return true;//返回true让表单正常提交
             }else{
                 return false;//返回false那么表单将不提交
            }
         }

// ajax提交
$.ajax({
    url:'your url',
    dataType:'json',
    data: yourParams
}).done(function(rs){
    // rs 既是返回内容
    btn.disabled = true;
});

//普通提交，设置按钮为不可点击
function submit()  
 {  
 var submitId=document.getElementById('submitId');  
 submitId.disabled=true;  
 document.fm.submit();  
 setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码  
}   

• 后台代码控制表单提交有一个好的办法就是使用session
  具体可参考http://www.cnblogs.com/xdp-gacl/p/3859416.html

重置表单

• 按钮重置

<!--通用按钮重置-->
<input type="reset" value="reset">
<!--自定义按钮重置-->
<button type="reset">reset</button>

用户点击重置按钮时会触发reset事件，有时候可以监听它，阻止重置

表单字段

• 共有的表单字段属性
  | 属性 | 解释|
  | ------------- |-------------
  | disabled | 布尔值，表示当前字段是否被禁用
  | form | 指向当前字段所属表单的指针；只读
  | name |当前字段的名称
  | readonly |布尔值，表示当前字段是否只读
  | tabIndex |表示当前字段的切换（tab）序号
  | type |当前字段的类型，如：“checkbox”、“radio”，等等
  | value |当前字段将被提交给服务器的值

• 共有的表单字段方法

focus()和blur()

// HTML5新增autofocus
<input type="text" name="uname"autofocus>

• 共有的表单字段事件

1. blur：当前字段时区焦点时触发。
2. change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发。
3. focus：当前字段获得焦点时触发。

焦点管理

在 HTML5 工作草案中，DOM 属性 activeElement 与方法 hasFocus() 为程序员提供了更好的控制页面交互的能力，特别是对于用户行为引发的交互。例如，它们都可以用于统计使用目的，跟踪页面特定链接的点击次数，计算元素获得焦点的次数等等。此外，当与 AJAX 技术结合以后，将会减少向服务器请求的数目，这取决于用户的活跃程度和页面的布局。具体实现可看MDN

表单文本

• 选择文本
  可以用select()

document.forms[0].elements[0].select();

• 选择select事件
  与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。

// 取得用户在文本框中选择的文本
function showSelected(text){
        alert(text.value.substring(text.selectionStart,text.selectionEnd));
    }