Прислушвателят на събития на фокус не се задейства върху нередактируем вход

Опитвам се да накарам слушателя на събития на фокус да се активира, когато потребител се опита да въведе 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>

javascript validation forms html dom-events
person Todd Williams    schedule 23.04.2015    source източник
comment
id не е низ, това е Event обект. Можете да опитате event.target.id   -  person Halcyon    schedule 24.04.2015
comment
Защо добавяте слушателя на събития към документа вместо входния елемент?   -  person Barmar    schedule 24.04.2015
comment
Друго нещо, което трябва да отбележите е, че използвате setInterval неправилно. Трябва да му предадете обратно извикване като setInterval(runVal, 1) (обърнете внимание на липсата на скоби). Точно сега вие му предавате изхода на runVal(), който е нищо. Функцията ще се стартира веднъж и след това никога повече.   -  person Halcyon    schedule 24.04.2015
comment
@Barmar, не мога да редактирам въведеното. Това е в кода на заключената количка на Volusion.   -  person Todd Williams    schedule 24.04.2015

Отговори (1)


arrow_upward
3
arrow_downward

Изброих някои проблеми (в допълнение към решение в долната част):

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

2) Както спомена Barmar, слушателят на събития се добавя към документа, а не самият входен елемент.

3) Както Halcyon спомена, 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">

person boombox    schedule 23.04.2015
comment
Това изглежда работи! Странното е, че не работи в JSfiddle, но работи тук в редактора на stackoverflow. Някаква идея защо? (Бих гласувал за отговора, но репутацията ми е твърде ниска) - person Todd Williams; 24.04.2015
comment
Моята цигулка беше настроена на без обвиване в ‹head› вместо onLoad в лявото меню. Сега работи! Благодаря! Бихте ли искали да гласувате за въпроса ми, за да мога да гласувам за сътрудници като вас? - person Todd Williams; 24.04.2015
comment
Не е необходимо да тествате e.target.id, тъй като добавяте само слушателя към този идентификатор. Просто използвайте this, за да получите целта. - person Barmar; 24.04.2015
comment
Това е много вярно! Ще направя модификацията. - person boombox; 24.04.2015