jQuery: очистить веб-форму, когда пользователь щелкает в другом месте

У меня есть веб-страница с 3-мя веб-формами, где первые два ждут цифрового ввода, а последний может быть пустым.jQuery: очистить веб-форму, когда пользователь щелкает в другом месте

A web form showing three text fields, two of them containing invalid inputs

Вот уменьшенная и готов к запуску тест:

<html> 
<head> 
<style> 
.invalid { 
     border: 2px solid #FF0000; 
     background-color: #FFCCCC; 
} 
</style> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     //$('body').click(....) 
     $('#cl_txt, #mks_txt, #comment_txt').blur(function() { 
      $('#cl_txt, #mks_txt, #comment_txt').removeClass('invalid'); 
     }); 

     $('#mks_btn').click(function(e) { 
      if (! $('#mks_txt').val().match(/^[0-9]{6,}$/i)) { 
       $('#mks_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
     $('#cl_btn').click(function(e) { 
      if (! $('#cl_txt').val().match(/^[0-9]{6,}$/i)) { 
       $('#cl_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
     $('#comment_btn').click(function(e) { 
      if ($('#comment_txt').val().length < 2) { 
       $('#comment_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
}); 
</script> 
</head> 
<body> 
<table border=1> 
<form><tr><th>MKS</th><td> 
<input name="toggle_mks" id="mks_txt" type="text" size="10"> 
<input type="submit" id="mks_btn" value="Add MKS" class="toggle"> 
</td></tr> 
<form><tr><th>CL</th><td> 
<input name="toggle_cl" id="cl_txt" type="text" size="10"> 
<input type="submit" id="cl_btn" value="Add CL" class="toggle"> 
</td></tr></form> 
<form><tr><th>Comments</th><td> 
<textarea name="comment" id="comment_txt" rows="4" cols="40"> 
</textarea> 
<input type="submit" id="comment_btn" value="Add comment" class="toggle"> 
</td></tr></form> 
</table> 
</body> 
</html>

Когда неверный текст был введен, и соответствующая кнопка отправки щелкнул, затем я добавляю .invalid класс в это текстовое поле или область текста, чтобы он выглядел красным.

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

В таком случае я хотел бы красный .invalid класс должен быть удален из текстовых элементов #cl_txt, #mks_txt и #comment_txt снова. Но я не знаю, как это устроить. Я попытался установить $ ('# cl_txt, #mks_txt, #comment_txt'). Blur (....), но он никогда не работает последовательно. Я пробовал $ ('body'). Нажмите (...) вместо этого, но тогда проверка формы, похоже, сломается, текстовые поля никогда не окрашиваются в красный цвет.

Любая помощь пожалуйста?

источник

2011-01-18 Alexander Farber

Попробуйте использовать jQuery outside events плагин. Также см. demo. Основная идея заключается в том, что вы делегируете элементу событие clickoutside (или даже dblclickoutside) и укажите, что должно произойти, когда оно срабатывает.

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

источник

2011-01-18 10:30:04 Darmen

Спасибо за интересную информацию, но я предпочел не вводить еще один плагин. Может быть, я мог бы использовать тайм-аут как-то здесь - чтобы покрасить поля через какое-то время, если ни один из них не сфокусирован? –

Конечно, вы можете, но я думаю, что это было бы «неестественно» здесь. – Darmen

jQuery: очистить веб-форму, когда пользователь щелкает в другом месте

ответ

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