码迷,mamicode.com
首页 > Web开发 > 详细

jQuery表单事件

时间:2015-02-28 18:05:45      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:

<input type="text" class="field" value="文本框" />
<textarea name="words" class="field" cols="30" rows="10"></textarea>
<select name="age" class="field">
    <option value="1">15</option>
    <option value="2">22</option>
    <option value="3">28</option>
</select>

focus()当元素获得焦点时触发,比如鼠标点击选中元素或tab键定位到元素时,该元素就会获得焦点。
focus()方法触发focus事件,或当发生focus事件时运行的函数。

$(".field").focus(function() {
        $(this).css({
            ‘background‘: ‘#f90‘,
            ‘border‘: ‘1px solid #999‘
        });
    })

focusin()事件在元素(或内部的任何元素)获得焦点时触发。它和focus()的区别是,focusin()可以在父元素上检测子元素获得焦点的情况(换而言之,它支持事件冒泡)。

<p>
    <input type="text" value="focusin" />
    <span>focusin</span>
</p>
<script>
$(function() {
    $("p").focusin(function() {
        $(this).find("span").css(display, inline).fadeOut(1000);
    })
})
</script>

 

blur()当元素失去焦点时触发,仅发生于表单上。

$(".field").blur(function() {
        $(this).css({
            ‘background‘: ‘#f90‘,
            ‘border‘: ‘1px solid #999‘
        });
    })

 

2个表单元素,1个用来输入内容,另外一个同步的显示输入的内容。

change()方法
当输入域发生变化时触发change事件。
仅适用于text textarea select元素,当用于select元素时,选择某个选项时触发chagne事件,当用于text和textarea元素时,在元素失去焦点的时候触发change事件。

$(".field").change(function() {
        $(this).css({
            ‘background‘: ‘#f90‘,
            ‘border‘: ‘1px solid #999‘
        });
    })

 

select()方法
当text或textarea域的input元素中的文本被选择时,会发生select事件

$(".field").select(function() {
        $(this).css({
            ‘background‘: ‘#f90‘,
            ‘border‘: ‘1px solid #999‘
        });
    })

 

submit()方法
当表单提交时,触发submit事件,只适用于表单。
阻止提交按钮的默认action。 使用preventDefault()函数来阻止对表单的提交;

$("form").submit(function(e) {
        e.preventDefault();
        alert("Submit");
    })

 

jQuery表单事件

标签:

原文地址:http://www.cnblogs.com/wanbi/p/4305634.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!