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

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

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

$("#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 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小部件。但是您需要为此使用jui 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>

警报后专注于输入字段

6 个答案: