Question

在chrome（windows）中，我有一个奇怪的问题。

我在选择下拉列表中更改值后会提示警告。

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

在Firefox中，一切都很好。知道怎么解决吗？ here is the fiddle

[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>

Answer 1

尝试使用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;
       }
   });
})();

Answer 2

我很确定这是一个错误，但是我使用了这个解决方法，通过在调用alert方法之前通过聚焦和模糊输入强制将默认样式重新应用到输入，这里是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;
    }
  });
})();

警报消息后Chrome（WINDOWS）缺少光标

2 个答案: