Question

我面临的问题是单击单选按钮。当输入字段具有焦点并且模糊事件发生时，将发生一些字段验证，并且错误消息应显示在输入字段下方。在以下场景中：

专注于文字输入字段
点击单选按钮

出现错误信息，但未选择单选按钮。小提琴：https://jsfiddle.net/lajon/97w54op7/6/

请参阅下面的代码段：

$('input.yo').focus();

$('input.yo').focus(function() {
  $('div#message').hide();
});

$('input.yo').blur(function() {
  $('div#message').show();
  //$('div#message').delay(100).show(0);
});

#message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
  <form>
    First name:
    <input class="yo" type="text" name="fname">
    <br>
  </form>
  <div id="message">some validation error message</div>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
  </form>
</div>

可能的解决方案是设置模糊延迟

$('p').delay(100).show(0)

或在输入字段下方留出空格以适合错误消息，但这并不理想。

我想知道是否有人可以为这个问题提出更优雅的解决方案。

Answer 1

是的，您可以使用解决方法：

$('input.yo').blur(function() {
    setTimeout(function() { $('p').show(); }, 100);
});

希望这有帮助。

＆＃13;

$('input.yo').focus();
$('input.yo').focus(function() {
  $('p').hide();
});

$('input.yo').blur(function() {
  setTimeout(function() { $('p').show(); }, 100);
});

＆＃13;

p { 
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <form>
    First name: <input class="yo" type="text" name="fname"><br>
  </form>
  <p>some validation error message</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
  </form>
</div>

＆＃13;

Answer 2

简单，注意：

我们在这里触发了两个动作：

1＃关注输入：

按鼠标按钮（或TAB，但让我们想一想鼠标）时会触发。

2＃检查单选按钮：

当您按鼠标按钮并释放按钮时触发该操作，这意味着只有在您释放按钮时才会检查单选按钮的

现在，想一想。当你按下输入时，你显示<p>（在我们的例子中是单选按钮），但是当你释放它上面的按钮时，只会检查单选按钮，但是<p>是已经在那里，按钮在那之前。你看到了问题吗？

THE SOLITION 。

只需添加一种不同的方式来显示您的消息，其显示不会与单选按钮的位置冲突。您可以使用position设置样式，或者更简单一些，如下所示：

https://jsfiddle.net/97w54op7/9/

我希望它可以帮到你。：）

操作其他DOM元素时未选择单选按钮

2 个答案: