onKeyDown事件不發射

我做了一個包含複選框和小輸入字段的表單。我已經編寫了一個腳本來做兩件事：onKeyDown事件不發射

如果複選框被選中，並且文本框內沒有值，請將複選框的名稱插入到關聯的文本字段中。
如果用戶鍵入到文本框中，並且未勾選相應複選框的複選框，請進行檢查。
如果用戶清除文本框，請按刪除/退格/ etc，清除複選框中的檢查。

什麼不工作： *當用戶鍵入到文本字段，複選框不會立即（通常爲2個鍵分別鍵入）出現，即使從邏輯上說，當所調用，如果該複選框未檢查，檢查它。 *當用戶清除文本區域時，使用退格/刪除/等，複選框將保留。

什麼是工作：

用戶點擊複選框以自動插入複選框值進入該領域。用戶再次單擊該複選框以清除文本字段中的值。

function autocheck(ElementName, SectionName) { 
//window.alert('keyword-' + SectionName + '-' + ElementName.toLowerCase()); 
    if (document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == false) 
    { 
     document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = true 
    } 

    if (document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value == '') 
    { 
     document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = false; 
    } 
} 

function autofill(ElementName, SectionName) { 
    ElementName=ElementName.replace(" ", "-"); 
    //window.alert('You got this: ' + ElementName); 

    if(document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == true) 
    { 
     document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).value; 
    } else { 
     document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = ''; 
    } 
}

這裏是相關的HTML

<input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label> 
    <br> 
    <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeydown="autocheck('throw', 'split');">

來源

2014-07-04 Paul Williams

使用替代的onkeyup onkeydown事件的！
由於您只能獲取該字段的更改值。

在keydown事件的時間點，輸入的值將是舊的/不變的。

保持按鍵的基本生命週期上的輸入事項：

KEYDOWN-事件冒泡
施加於輸入的KeyEvent（主要是在將其寫入或從其刪除）
也可應用於多個當用戶將密鑰
KEYUP事件冒泡倍

This fiddle完美地適合我。（您只的onkeyup代碼改爲的onkeydown）

<!DOCTYPE html> 
    <html> 
     <head> 
       <script type="text/javascript"> 
         function autocheck(ElementName, SectionName) { 
        //window.alert('keyword-' + SectionName + '-' + ElementName.toLowerCase()); 
         if (document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == false) 
         { 
          document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = true 
         } 

         if (document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value == '') 
         { 
          document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = false; 
         } 
        } 

        function autofill(ElementName, SectionName) { 
         ElementName=ElementName.replace(" ", "-"); 
         //window.alert('You got this: ' + ElementName); 

         if(document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == true) 
         { 
          document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).value; 
         } else { 
          document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = ''; 
         } 
        } 
       </script> 

     </head> 
     <body> 
      <input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label> 
      <br> 
      <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeyup="autocheck('throw', 'split');"> 
     </body> 

    </html>

來源

2014-07-04 13:38:18

燁這個完美工作。我不明白OnKeyUp和OnKeyDown之間的區別。我還添加了一個OnBlur，以防用戶使用鼠標選擇所有內容，然後使用右鍵單擊 - >刪除選項。無論哪種方式，這工作。謝謝。 –

onKeyDown事件不發射

回答

相關問題