焦點事件監聽器不會觸發不可編輯的輸入

我試圖讓用戶嘗試輸入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。現在它工作了！謝謝！你願意提出我的問題嗎？這樣我就可以贊成像你這樣的貢獻者嗎？ –

焦點事件監聽器不會觸發不可編輯的輸入

回答

相關問題