2014-01-22 23 views
0

我有一個必須只接受數字的文本框。我使用JQuery的onblur方法驗證輸入到文本框中的內容。如果驗證失敗,那麼我會給出警報彈出窗口,告訴用戶有問題,然後以編程方式將焦點返回到文本框。JQuery>使用模糊將焦點返回到文本框時,插入/光標不閃爍

我的問題是,當我將焦點返回到文本框時,光標/插入符不會閃爍。它在那裏,我可以輸入到文本框中,而無需先點擊它來選擇它。但是,在我實際點擊文本框之前,光標不會閃爍。如果我不使用Alert Pop Up,我注意到光標閃爍。

我設置了一個小的HTML頁面來說明.. http://jsfiddle.net/xB8Hy/2/這裏是代碼...

<html> 
<head> 
<script type="text/javascript" src="Plugins/jquery.js"></script> 

<SCRIPT type="text/javascript"> 
$(document).ready(function() { 

    $(document).on("blur","#qty_text", function() { 
     var myregexp = /^[0]$|^[1-9][0-9]*$/; 
      if(myregexp.test($("#qty_text").val())){ 
       alert("Input Valid"); 
      }else{ 
       setTimeout(function(){ 
        alert("Not a valid number"); 
        $("#qty_text").focus(); 
       }, 10); 
      } 
    }); 

}); 
</script> 
</head> 

<body> 
    <input type="text" id="qty_text"> 
</body> 
</html> 

任何想法如何,我可以有彈出,但仍然獲得在文本框後閃爍的光標用戶確定不在Alert Pop Up中?謝謝。

回答

0

那麼萬一有人在意我最終會使用一個名爲SimpleModal的jQuery模態對話框插件。看到這裏:http://www.ericmmartin.com/projects/simplemodal_v12/

當您從文本框中單擊並且驗證測試失敗時,對話框將打開,幾秒鐘後它會自動關閉(插入光標,不管您稱之爲)光標在文本中閃爍框。成功。

小的代碼片段:

<SCRIPT type="text/javascript"> 
$(document).ready(function() { 
    $(document).on("blur","#qty_text", function() { 
     var myregexp = /^[0]$|^[1-9][0-9]*$/; 
     if(myregexp.test($("#qty_text").val())){ 
      alert("Input Valid"); 
     }else{ 
      $('#simple-modal').modal({ 
       onOpen: function (dialog) { 
       // If you use the onOpen callback, you must "show" 
       // the overlay, data and container elements manually      
        dialog.overlay.fadeIn('slow'); 
        dialog.container.fadeIn('slow'); 
        dialog.data.fadeIn('slow'); 
       }, 
       onShow: function (dialog) { 
       // Close the dialog automatically three seconds after it opens 
        setTimeout(function(){ 
         dialog.data.hide(); 
         dialog.container.hide(); 
         dialog.overlay.fadeOut('slow', function() { 
          $.modal.close(); // must call this! 
          $("#qty_text").focus(); 
         }); 
        }, 3000); 
       } 
      }); 
     } 
    }); //<-- end of $(document).on("blur",..) 
}); //<-- end of $(document).ready() 
</script> 

這裏是身體與DIV其格式化對話框:

<body> 
<input type="text" id="qty_text"> 

<!-- The SimpleModal Dialog --> 
    <div class="simple-modal" id="simple-modal"> 
     <div class="simple-modal-header"> 
     <h1>Quantity Error</h1> 
     </div> 
     <div class="simple-modal-body"> 
     <div class="contents"> 
      <p>Quantity Entered is not a Number</p> 
      <p>Please Try Again</p> 
     </div> 
     </div> 
     <div class="simple-modal-footer"></div> 
    </div> 
</body> 

我不知道爲什麼要這樣,你不點擊Javascript警告彈出窗口中的確定按鈕後,您將焦點返回到文本框中,然後點擊閃爍的插入符號。如果有人能夠向我解釋這一點,我仍然會很感激。