javascript - 在指定时间临时更改 HTML 中的占位符

Question

我正在检查另一个堆栈溢出 page并发现它几乎解决了我如何临时更改搜索(输入)框的占位符文本的问题，但它不会在指定时间后将更改还原为原始文本。我想要它以便在突出显示完成其 3 秒 (3000) 外观/淡化后，占位符文本也恢复为原始文本。

原始占位符是按数字搜索

代码如下:

$(document).ready(function(){
    if ($("input").val() == "") {
        $("button").click(function(event) {
            $("input").attr("placeholder","Enter Account Number.");
            $("input").effect("highlight",{color:"#D46A6A"},3000);
            event.preventDefault(); 
        });
    }
});

我尝试将 3000 放在“输入帐号”之后，这样它看起来像 $("input").attr("placeholder","Enter Account Number.",3000);,但这没有用。

谢谢!

Answer 1

实际上它应该是这样的:http://jsbin.com/lonun/2/edit

$(function() { // DOM ready shorthand

  var $inp = $('#accNumber'),             // Cache your elements
      pHolder = $inp.prop('placeholder'), // Remember the default placeh.
      $btn = $('#submitNumber');          // Cache your elements


  $btn.click(function( ev ) {

      ev.preventDefault(); 

      if( !$.trim($inp.val()) ) {         // THE 'if' GOES INSIDE THE CLICK fn!
        $inp
          .val("")        // Also!: Reset value if i.e <space> was used
          .prop('placeholder', "We need it!")        // WARN USER
          .effect("highlight",{color:"#D46A6A"}, 3000, function(){
                $inp.prop('placeholder', pHolder);   // RESTORE ORIG.
          });        
      }

  });

});

正如您从上面的代码中看到的那样，我对所需的元素使用了 ID，因此 HTML 可能看起来类似于:

<input id="accNumber" type="text" placeholder="Acc. number"> 
<button id="submitNumber">DONE</button>