Events-Form Events

Posted on Edited on In Views: Disqus:

 

一、.blur()

與focus()方法相對，.blur()表示當某表單的欄位失去focus時，則換.blur()方法作動。

可先參考http://www.w3schools.com/jquery/jquery_events.asp

 

二、.change()

只有在<input>、<textarea>、<select>元素中當欄位輸入值改變時，

則會觸發.change()事件。

共有三種多載方式：

1、.change( Function handler )

2、.change( [Anything eventData ], Function handler )

3、.change()

第一、二種用來掛載該事件，第三種用來觸發該事件。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <form>
        <input class="target" type="text" value="Field 1">
        <select class="target">
            <option value="option1" selected="selected">Option 1</option>
            <option value="option2">Option 2</option>
        </select>

    </form>
    <div id="other">
        Trigger the handler
    </div>

    <script>
        $(".target").change(function () {
            alert("Handler for .change() called.");
        });

        $("#other").click(function () {
            $(".target").change();
        });
    </script>
</body>
</html>

 

三、.focus()

當滑鼠點在<input>、<select>、<a>元素時則會觸發

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>focus demo</title>
    <style>
        span {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p><input type="text"> <span>focus fire</span></p>
    <p><input type="password"> <span>focus fire</span></p>

    <script>
        $("input").focus(function () {
            $(this).next("span").css("display", "inline").fadeOut(1000);
        });
    </script>

</body>
</html>

 

四、.focusin()

效果跟.focus()一樣，並且支援bubbling event。

 

五、.focusout()

效果跟.blur()一樣，並且支援bubbling event。

 

六、.select()

只有在<input type="text">、<textarea>元素底下，當文字被反白時，

則會觸發.select()事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>select demo</title>
    <style>
        p {
            color: blue;
        }

        div {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <p>Click and drag the mouse to select text in the inputs.</p>
    <input type="text" value="Some text">
    <input type="text" value="to test on">
    <div></div>

    <script>
        $(":input").select(function () {
            $("div").text("Something was selected").show().fadeOut(1000);
        });
    </script>

</body>
</html>

 

七、.submit()

當<input type="submit">元素被按下時，會觸發.submit()事件。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <form id="target" action="destination.html">
        <input type="text" value="Hello there">
        <input type="submit" value="Go">
    </form>
    <div id="other">
        Trigger the handler
    </div>

    <script>

        $("#target").submit(function (event) {
            alert("Handler for .submit() called.");
            event.preventDefault();
        });

        $("#other").click(function () {
            $("#target").submit();
        });
    </script>
</body>
</html>