Поле ввода поля очистки, вызывающее событие размытия - как избежать

Я создаю поле формы с кнопкой «четкое значение» - например, на iOS есть значок «X», который вы можете нажать, чтобы очистить строку поиска.Поле ввода поля очистки, вызывающее событие размытия - как избежать

Моя проблема: я использую событие размытия поля для выполнения проверок ошибок в формате ввода, а моя реализация значка «X» всегда вызывает событие размытия.

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

Я использую jQuery, но это может быть общая проблема CSS/javascript.

например принятое решение здесь: Clear icon inside input text это прекрасный пример первоначального намерения, но это также вызовет событие размытия, как только вы его присоедините.

UPDATE: Похоже, что лучший способ заключается в использовании функции проверки ошибок - но я не люблю его, поэтому я продолжал смотреть ... Оказывается, я не знал об атрибуте contenteditable в HTML5.

Помимо очевидной проблемы доступности, связанной с использованием полей формы для данных формы и забыванием о старых моделях, которые не могут выполнять HTML5, почему бы НЕ воссоздать поля ввода с контентными тегами div?

источник

2013-03-25 tim

смазанности пожары, потому что вы удалить фокус при нажатии на кнопку, что вы ожидаете? – epascarello

Если вы используете фоновое изображение, у вас все еще есть цель клика ... он просто не идеален для использования. Вам нужно будет узнать, куда был нажат вход, и если он находился в пределах определенной границы (где находится кнопка «clear»), затем очистите текст. В противном случае это был обычный щелчок – Ian

Вместо того чтобы пытаться избежать события размытия, почему бы вам просто не исключить этот случай (X-клик) из вашей функции проверки ввода? Есть несколько способов, которыми вы могли бы это сделать, например, при наведении вы можете установить var doExclude в true. В вас функции проверки, когда пожары размытия событий, он может сначала проверить это, прежде чем остальные функции:

if (exclude) return;

После того, как X будет сделано, вы можете вернуть фокус на свой вход, если вы хотите $('input').focus();

источник

2013-03-25 18:07:20 Vexter

много вариантов здесь

Вы можете изменить триггер для проверки на «KeyUp» или проверить ошибки на «Отправить»
использование jquery validate plugins
в сообщении об ошибке $('#X-icon').click(fn) вы можете очистить/скрыть, а , поэтому пользователь не увидит сообщение об ошибке.

источник

2013-03-25 18:06:01 aifarfa

Что-то, что взломано и не может быть предпочтительным, заключается в том, что вы используете setTimeout в событии размытия, так что вы задерживаете код от 100 мс (или хотя бы длинный). В течение 100 мс необходимо нажать кнопку «Очистить». Если это не так, выполните обычные проверки/форматирование ошибок. Если он был нажат, очистите текст ввода и не делайте нормальное событие blur.

Вот пример, используя стиль от ссылки вы публикуемой (Clear icon inside input text):

$(document).ready(function() { 
    var clearTextTimeout; 

    $("#data_field").on("blur", function() { 
     var $that = $(this); 
     clearTextTimeout = setTimeout(function() { 
      console.log("would be error checking and formatting text");    
     }, 100); 
    }); 

    $("#data_field_clear").on("click", function() { 
     clearTimeout(clearTextTimeout); 
     console.log("clearing text"); 
     $("#data_field").val(""); 
    }); 
});

http://jsfiddle.net/37Pxw/

Берегитесь консолью вашего браузера и вы увидите, что проверка ошибок/форматирование выполняется только тогда, когда вы не нажимаете кнопку «Очистить».Можно с уверенностью сократить число до 50 вместо 100.

Это работает, потому что click события кнопки «Clear» будет работать сразу же после того, как blur события входного, так что это достаточно безопасно предположить, если click события не работать в течение 100 мса (50) blur события входного, это WASN Не нажал.

источник

2013-03-25 18:09:09 Ian

+1 для довольно вовлеченной попытки решить проблему. – tim

Я решить мою проблему, как это (я не люблю входные теги много):

<!DOCTYPE html> 
<html> 
<script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
<script> 
$(function(){ 

$('div[contenteditable]').on('blur', function(){ 
alert('d'); 
}); 
$('div[contenteditable] > img').on('click', function(){ 
$(this).parent().text(''); 
}); 

}); 
</script> 
<style> 
div[contenteditable] { border:1px solid #009; position:relative;} 
img {position:absolute; top:2px; right:2px; cursor: pointer;} 
</style> 
<body> 

<div contenteditable="true">default value<img src="/" width="10" height="10" /></div> 

</body> 
</html>

источник

2013-03-25 19:33:37 tim

Поле ввода поля очистки, вызывающее событие размытия - как избежать

ответ

Смежные вопросы