Фокус-прослушиватель событий не стреляет на неотредактированный ввод

Question

Я пытаюсь запустить прослушиватель фокуса, когда пользователь пытается ввести P.O. Поле в поле адреса. Я не могу редактировать вход для простого решения для клавишных. Что мне не хватает в моем коде, что я не получаю предупреждение?

http://jsfiddle.net/ZQQS9/7/

<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1" value="" style="" onkeydown=""> 

<script type="text/javascript"> 
    document.addEventListener("focus", function killPObox(id) { 
     var idValue = document.getElementById('v65-onepage-shipaddr1').value; 
     if (id == 'v65-onepage-shipaddr1') { 
      function runVal() { 
       if (idValue.substr(0,4).toUpperCase() === "PO B" || idValue.substr(0,5) === "P.O. ") { 
        alert("USA Light cannot ship to P.O. Boxes. Please enter a street address."); 
        } 
       } 
        setInterval(runVal(),1); 
      } 
     }, true 
    ); 
</script> 

Answer 1

я перечислил некоторые вопросы (в дополнение к раствору в нижней части):

1) Как уже упоминалось Halcyon, то id аргумент в вашей killPObox(id) функции назначен на событие, так что вы можете получить нужные вам значения, сначала получив target события, которое будет вашим <input>.

2) Как отметил Бармар, слушатель событий добавляется в документ, а не сам элемент ввода.

3) Как упоминал Халкион, setInterval() принимает функцию, а не оцениваемый результат функции.

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

5) Событие focus не является хорошим событием для прослушивания. Мы можем исправить это, используя событие input, чтобы прослушать изменения стоимости вашего <input>.

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

document.getElementById('v65-onepage-shipaddr1') 
 
    .addEventListener('input', function killPObox(e) { 
 
    var targetValue = e.target.value; 
 
    if (targetValue.substr(0, 4).toUpperCase() === "PO B" || targetValue.substr(0, 5) === "P.O. ") { 
 
     alert("USA Light cannot ship to P.O. Boxes. Please enter a street address."); 
 
    } 
 
    }, true);

<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1">