Как уловить момент ввода поле потерял фокус?

Я использую структуру прослушивателя событий как это, чтобы сделать что-то, когда поле ввода теряет фокус. но это не сработает. какое событие я должен слушать, чтобы получить окно ввода момента, которое теряет курсор внутри него (пользователь щелкает за его пределами)?

document.getElementById('div inside which input is located').addEventListener( 'blur',  function(e){ if(event.target.className=='editInput'){doStuff(event.target);} } , false );

Ответ 1

Правильное событие - onBlur. Посмотрите на этот код:

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
<script type="text/javascript">
  function message() {
            var text = document.getElementById("test").value;
            alert(text);
    }
</script>
  </head>
  <body>
      <input type="text" name="test" id="test">
<script type="text/javascript">
document.getElementById("test").onblur=message;
</script>
  </body>
</html>

Он работает и печатает содержимое ввода, когда он теряет фокус. Возможно, ваша ошибка заключается в том, что вы подключили событие к div, а не к входу?

Ответ 2

var input = document.getElementsByTagName('input')[0];

input.onfocus = function() {
  this.className = 'highlight';
}

input.onblur = function() {
  this.className = '';
}

Ответ 3

Установка обработчика события размытия с использованием ванили Javascript:

Вы можете установить обработчик события размытия для конкретного элемента "test" в javascript в ваниле с помощью кода, такого как

document.getElementById("test").onblur= yourEventHandler

Вы можете использовать обработчик событий в своем вопросе без каких-либо изменений. Эта часть покрыта. Тем не менее, я считаю, что здесь еще можно сказать.

Общая картина:

События размытия/фокуса на текстовых входах относятся к числу наименее опасных событий для работы с точки зрения совместимости между браузерами. Но если вы собираетесь серьезно заниматься разработкой, я рекомендую использовать фреймворк, такой как jQuery, YUI, Dojo, MooTools и т.д. Это поможет вам лучше писать код и защитит вас от проблем совместимости.

К сожалению, веб-разработчикам реальности приходится сталкиваться с проблемой многих браузеров с похожими, но не одинаковыми поведением. Недостаточно найти решение, которое будет работать в браузере, который мы используем, в тот момент, когда мы тестируем фрагмент кода, который мы только что написали. Нам необходимо убедиться, что наш код работает правильно во всех браузерах, на которые нацелено наше приложение. Итак, что произойдет, если вы вдруг обнаружите, что ваш способ назначить размытие даже не работает в каком-либо браузере для какого-то определенного элемента, а другой? Вы идете повсюду в своем коде и ставите, если там? Вы уверены, что ничего не пропустили, если идете по этому маршруту? И тогда, если вы найдете другую проблему с другим браузером, вы добавляете еще один, если "и т.д. И т.д."? Возможно, вы решили определить функцию setBlurEventHandler, которая делает то, что она говорит в поле, и использовать ее везде в своем коде вместо утверждений, подобных приведенному выше. Вы делаете это только для размытия или для всего, что вы делаете? Имеет смысл делать это и для других вещей. Отлично. Теперь у вас есть структура для написания кода, совместимого с браузерами. Если бы все мы сохранили наши рамки для себя, мы бы потратили много времени на повторное обнаружение и устранение тех же проблем. Войдите в рамки Javascript с открытым исходным кодом. Вы можете просто использовать их, используя в своих интересах часы труда, которые другие вкладывают в них, но вы также можете внести свой вклад, сообщив об ошибках, написав код и документацию. Разве это не имеет смысла? (Или, если в какой-то момент в будущем вы уверены, что у вас есть структура, основанная на некоторых очень умных идеях, хотя и неполная, во что бы то ни стало ее выложите и посмотрите, что вы можете предложить сообществу и что сообщество может сделать для вы...)

Чтобы лучше управлять этой точкой дома, позвольте мне показать вам некоторые комментарии, взятые из источника jQuery. Как я уже говорил, события размытия/фокуса на вводе текста являются одними из наименее неприятных событий для работы с точки зрения совместимости между браузерами. Но насколько вы уверены в том, что осознаете (или помните!) Различные особенности браузера, с которыми вам приходится иметь дело, когда обработка даже самых простых и наименее неприятных событий сопровождается такой встроенной кодовой документацией?

// IE<9 dies on focus/blur to hidden element (#1486)

// IE doesn't fire change on a check/radio until blur; trigger it on click

// This still fires onchange a second time for check/radio after blur.

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

Лучший подход с использованием jQuery:

Предположим, что у вас был div, называемый formDiv, с тремя элементами input, только один из которых первоначально имел класс editInput.

<div id=formDiv>     
    <input type="text" name="test1" id="test1" />   
    <input type="text" name="test2" id="test2" class='editInput' />    
    <input type="text" name="test3" id="test3" />           
</div>

Используя jQuery, вы можете просто сделать что-то вроде (я скопировал фактическую логику обработчика события из вашего кода):

("#formDiv input").blur(function(){ 
      if(this.className=='editInput'){
          doStuff(this.target);
      }
 });

который, я считаю, ближе к тому, что вы хотели сделать, чем другие решения здесь. (В вашем коде вы пытались присоединить событие к div, содержащему входные данные. Возможно, я неправильно истолковал ваши намерения, но я думал, что это то, что вы хотели.)

Вы можете попробовать это решение с помощью этого jsFiddle: http://jsfiddle.net/r7tuT/3/

Некоторые мысли о разлуке:

Есть люди, которые скажут вам, что те или иные рамки лучше, и они могут быть правы. Я буду только комментировать, что jQuery является самым популярным и довольно приличным. Выбор за вами, но, как я сказал, я считаю, что вы должны начать использовать одну из этих фреймворков раньше, чем позже, поскольку это улучшит качество вашей работы, позволит вам кое-что сделать в мгновение ока и изменить подход к решению проблем, Когда каркас или язык программирования делает это для вас, это отличный момент в вашей жизни как кодер: -)

Ответ 4

Попробуйте onblur вместо blur.

blur - это метод, который заставляет объект терять фокус, тогда как onblur - это событие, которое возникает, когда объект теряет фокус.