警报后集中在输入字段上

Question

我有一个输入字段和一个按钮，单击输入字段后，我将检查输入字段是否为空，然后是提示符和警告框。

• 我使用Jquery-conferm有一些定制的警报和会议框。
• 但是当我点击ok的时候，我试着把注意力集中在那个空的字段上，但是这不起作用。

片段

​

$("#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-确认操作事件来完成的。

​

$("#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>

​