警报关注输入字段后

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

我正在应用 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 2

您可以使用带有 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 3

这应该可以。 刚刚将$('#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>

Answer 4

使用 jquery 对话框 https://jqueryui.com/dialog/#modal-message 小部件。但是你需要有 jquery ui。

您可以为每个按钮定义自定义按钮和操作。如果用户按确定。然后您可以将焦点设置到所需的控制或执行所需的操作

Answer 5

这是通过使用 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 6

一个更好的选择是使用甜蜜警报，如果您只想使用窗口警报，那么试试这个，

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