javascript - JQueryを使用して5秒後にテキストボックスの値をクリアするには?

Question

私はこれを試しました：

  <script type="text/javascript">
        $(function() {
            $("#button").click( function()
            {
                alert('button clicked'); // this is calling
                setTimeout(function(){
                    alert('setTimeout');  // this is not calling
                    document.getElementById('clearTxt').value = "";
                }, 9000);
            }
        );
        });
    </script>

私のHTMLコード:

    <form>
            <input type="text" id="clearTxt"/>                                              
            <input type="submit"  value="Search" id="button"  />
    </form>

しかし、このコードは機能していません。この問題を解決するのを手伝ってください。

Answer 1

コードをフィドルに貼り付けたところ、アラートが発生しました。ただし、入力を囲むフォームタグが原因で、送信ボタンをクリックするとページから移動し、タイムアウトを実行する時間がないため、タイムアウト関数は実行されません。submitをボタンに変更するかpreventDefault()、関数を呼び出してフォームの送信を停止する必要があります。

このコードは機能します：

HTML：

<form>
    <input type="text" id="clearTxt" />                                           
    <input type="button" value="Search" id="button" />​
</form>

脚本：

$(function() {
    $("#button").click( function () {
        alert('button clicked');
        setTimeout(function(){
            alert('setTimeout');
            document.getElementById('clearTxt').value = "";
        }, 5000);
    });
});

http://jsfiddle.net/acfkU/1/を参照してください

Answer 2

コードは問題ありませんが、フォームを送信している場合preventDefaultは、イベントオブジェクトのメソッドを使用して、jQueryがページに読み込まれていることを確認できます。

$("#button").click(function(event) {
    event.preventDefault();
    //alert('button clicked'); // this is calling
    setTimeout(function() {
        // alert('setTimeout'); // this is not calling
        document.getElementById('clearTxt').value = "";
        // $('form').submit();
    }, 9000);
});

Answer 3

以下のように、デフォルトの送信アクション (preventDefaultメソッドを持つ)をオーバーライドします。

$("#yourform").submit(function(event) {
    event.preventDefault();
});

ここにあります：

HTML

<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />

JS

$(function(){
    $("#button").click( function () {
        alert('button clicked');
        setTimeout(function(){
            alert('setTimeout');
            document.getElementById('clearTxt').value = "hi";
        }, 5000);
    });
});

デモJSFiddle