手记

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

CSDN发布地址http://blog.csdn.net/hope_it/article/details/72857651

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

基本内容

在HTML中,表单是由<form>元素来表示的,而在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:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素,在其选项改变时触发。
    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));
    }
1人推荐
随时随地看视频
慕课网APP