Chrome (WINDOWS)在提示消息后缺少光标

Chrome (WINDOWS) missing cursor after an alert msg

本文关键字：光标 消息 提示 WINDOWS Chrome      更新时间：2023-09-26

在chrome (windows)，我有一个奇怪的问题。

我在选择下拉菜单中改变值后提示警报。

当我点击确定时，如果我聚焦于1个输入文本，我看不到蓝色边框，也没有光标。

在firefox中，一切都很好。知道怎么修吗?这是小提琴

(JS) 

(function (){
    var focusing_val = "";
    $("#select").focus(function(){
        focusing_val = $(this).val();
    }).change(function (e) {
       console.log(focusing_val > 2);
       if ($(this).val() > 2) {
          e.preventDefault();
          alert("error");
          $(this).val(focusing_val);
          return false;
       }
   });
})();
[HTML] 

<input type="text" value="123" />
<select name="test1" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

尝试使用setTimeout.

对我来说，这很有效。

(function (){
    var focusing_val = "";
    $("#select").focus(function(){
        focusing_val = $(this).val();
    }).change(function (e) {
       console.log(focusing_val > 2);
       if ($(this).val() > 2) {
          e.preventDefault();
          setTimeout(function() {
                alert("error");
          },0);
          $(this).val(focusing_val);
          return false;
       }
   });
})();

我很确定这是一个错误，但我得到了它的工作与此解决方案，迫使默认的样式被重新应用到输入通过聚焦和模糊输入调用警报方法之前，这里是Fiddle，这里是代码:

HTML: 

<input type="text" value="123" id="input1" />
<select name="test1" id="select">
  <option value="1">1</option>
  <option value="2">2</option
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

JS: 

(function (){
  var focusing_val = "";
  $("#select").focus(function(){
    focusing_val = $(this).val();
  }).change(function (e) {
    console.log(focusing_val > 2);
    if ($(this).val() > 2) {
      e.preventDefault();
      $('#input1').focus().blur();
      alert("error");
      $(this).val(focusing_val);
      return false;
    }
  });
})();
相关文章：