zoukankan      html  css  js  c++  java
  • jQuery表单事件

    <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个用来输入内容,另外一个同步的显示输入的内容。

    keyup()方法

    完整的key press过程分为两步:一是按下按键,二十按键被松开并复位。
    当按钮呗松开的时候触发keyup事件。它发生在当前发生的焦点元素上。

    <input type="text" value="" id="value1" /><br />
    <input type="text" value="" id="value2" />
    <script>
        $("#value1").keyup(function() {
            var value = $(this).val();
            $("#value2").val(value);
        })
    </script>

    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");
        })
  • 相关阅读:
    旧文备份:利用一个定时器实现多个虚拟定时器的两种方法
    TypeScript type 类型别名
    TypeScript 模块系统
    github----awesome-typescript-projects
    synchronous-request-with-websockets
    async await promise
    Sharing Configuration in ASP.NET Core SPA Scenarios
    Unicode String to a UTF-8 TypedArray Buffer in JavaScript
    MVC 访问静态页面 View 下面放JS
    Processing Binary Protocols with Client-Side JavaScript
  • 原文地址:https://www.cnblogs.com/wanbi/p/4305634.html
Copyright © 2011-2022 走看看