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

Answer 4

您可以尝试将其添加到表单提交中，而不是将其添加到单击事件中。

function onSubmit() {
 alert('button clicked');
  setTimeout(function(){
    alert('setTimeout');
    $('#clearTxt').attr('value',"hi");
  }, 5000);
 return false;
}

由于您正在直接更新 value 属性，因此它将在 UI 中立即生效。如果不想添加到 onsubmit，最好将按钮的类型从提交更改。