警報后專注於輸入字段

Question

我有一個輸入字段和一個按鈕，單擊輸入字段后，我正在檢查輸入字段是否為空，然后出現提示和警報框

• 我正在使用Jquery-conferm具有一些自定義警報和會議框
• 但是在警報之后，當我單擊“確定”時，我試圖將精力集中在該字段為空的字段上，但這不起作用

片段

 $("#update").click(function() { if ($('#itemNameInput').val() == '') { $.alert({ title: 'Alert!', content: 'Please enter item name', }); $('#itemNameInput').focus(); return false; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button> 

我已經寫了一些代碼，專注於輸入字段，但是沒有用

Answer 1

這是通過使用jquery-confirm操作事件來完成的

 $("#update").click(function() { if ($('#itemNameInput').val() == '') { $.alert({ title: 'Alert!', content: 'Please enter item name', onDestroy: function() { // here the button key 'hey' will be used as the text. $('#itemNameInput').focus(); } }); return false; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button> 

Answer 2

一個更好的選擇是使用甜蜜警報，如果您只想使用窗口警報，請嘗試一下，

 $("#update").click(function() { if ($('#itemNameInput').val() == '') { if (window.confirm('Please enter item name')) { $('#itemNameInput').focus(); } return false; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button> 

Answer 3

我正在應用setTimeout來給時間加載父DOM以專注於它。
我使用確認框，因為在單擊確認時，應該觸發焦點。

 $(document).ready(function() { $("#update").click(function() { if (!$('#itemNameInput').val()) { $.confirm({ title: 'Alert!', content: 'Please enter item name', buttons: { confirm: { text: 'OK', btnClass: 'btn-red', } }, onDestroy: function() { $('#itemNameInput').focus(); }, }); return false; } }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button> 

Answer 4

您可以使用帶有onDestroy屬性的確認框

 $("#update").click(function() { if ($('#itemNameInput').val() == '') { $.confirm({ title: 'Alert!', content: 'Please enter item name', buttons: { ok: function() { } }, onDestroy:function(){$('#itemNameInput').focus();} }); } return false; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button> 

Answer 5

使用jquery對話框https://jqueryui.com/dialog/#modal-message小部件。 但是您需要為此使用jquery ui。

您可以定義自定義按鈕和每個按鈕的動作。 如果用戶按確定。 然后，您可以將焦點設置為所需的控件或執行所需的操作

Answer 6

這應該工作。 剛剛移動了$('#itemNameInput').focus(); 幾行。

 $("#update").click(function() { if ($('#itemNameInput').val() == '') { $('#itemNameInput').focus(); $.alert({ title: 'Alert!', content: 'Please enter item name', }); return false; } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemNameInput" name="itemNameInput"> </div> <button type="button" class="commonButton" id="update"> <i class="fa fa-save"></i> Update </button>