Радиокнопка не выбрана, когда другой элемент DOM управляется [закрыт]

Проблема, с которой я сталкиваюсь, происходит при нажатии на переключатель. Когда поле ввода имеет фокус и событие размытия произойдет, произойдет некоторая проверка поля, и сообщение об ошибке должно появиться ниже поля ввода. В следующем сценарии:

  1. сосредоточиться на поле ввода текста
  2. нажмите на переключатель

Появится сообщение об ошибке, но переключатель не выбран. Скрипт: 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)

или иметь место под полем ввода, чтобы оно соответствовало сообщению об ошибке, но это не идеально.

Мне интересно, может ли кто-нибудь придумать более элегантное решение этой проблемы.

javascript,html,css,

-1

Ответов: 2

1 принят

Просто, обратите внимание:

У нас есть два действия:

1 # Фокус из ввода:

Это срабатывает при нажатии кнопки мыши (или TAB, но позволяет думать о мыши).

2 # Проверить переключатель:

Это действие запускается при нажатии кнопки мыши и отпускании кнопки, это означает, что переключатель будет проверяться только при отпускании кнопки.

Теперь, просто подумайте. Вы показываете, <p>когда вы нажимаете на вход (в нашем случае на кнопке «Вкл.»), Но переключатель будет проверяться только при отпускании кнопки над ним, но <p>уже есть, где была кнопка. Вы видели проблему?

СОЛИД .

Просто добавьте другой способ показать свое сообщение, где это явление не может конфликтовать с местом переключателя. Вы можете стилизовать positionили, что-то более простое, следующим образом:

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

Надеюсь, это может вам помочь. :)

1

Да, вы можете использовать обходной путь:

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

Надеюсь это поможет.

$('input.yo').focus();
$('input.yo').focus(function() {
  $('p').hide();
});

$('input.yo').blur(function() {
  setTimeout(function() { $('p').show(); }, 100);
});
p { 
  display: none;
}
<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>

JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика