焦点事件监听器不会触发不可编辑的输入

我试图让用户尝试输入P.O.时触发焦点事件侦听器。放入地址栏中。我无法编辑简单按键解决方案的输入。我在代码中错过了什么，我没有得到警报？焦点事件监听器不会触发不可编辑的输入

<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>

来源

2015-04-23 Todd Williams

'id'不是字符串，它是一个'Event'对象。您可以尝试'event.target.id' – Halcyon

为什么要将事件侦听器添加到文档而不是输入元素？ – Barmar

要注意的另一件事是，你正在使用'setInterval'不正确。你应该像'setInterval（runVal，1）'那样传递回调（注意缺少括号）。现在你将'runVal（）'的输出传递给它，这是什么都没有。该函数将运行一次，然后再也不会。 – Halcyon

我列出了一些问题（除了底部的解决方案）：作为太平提到的，在你的killPObox(id)功能id参数分配给事件）

1，所以你可以通过首先获得这个事件来得到你需要的值，这将是你的<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">

来源

2015-04-23 21:46:19 boombox

这似乎工作！奇怪的是，它不能在JSfiddle中工作，但在stackoverflow编辑器中工作。任何想法为什么？（我会upvote的答案，但我的代表太低） –

不确定。它适用于我：http://jsfiddle.net/2w5gaynt/。 – boombox

我的小提琴在被设置为不包裹，而不是左侧菜单中的onLoad。现在它工作了！谢谢！你愿意提出我的问题吗？这样我就可以赞成像你这样的贡献者吗？ –

焦点事件监听器不会触发不可编辑的输入

回答

相关问题