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

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

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

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

如何使用JQuery在5秒后清除文本框值？

4 个答案:

演示JSFiddle