javascript onkeypress輸入文字

Question

我正在學習Javascript。僅當我的腳本標簽位於輸入文本元素下方時，下面的代碼才起作用，但是如果我將代碼置於輸入文本標簽上方，則它無法工作。 我可以知道為什么嗎？ 下面是代碼：

<head>    
</head>
<body>
    <input type="text" id="name" >   
    <script type="text/javascript">             
        var txtId = document.getElementById('name');    
        txtId.addEventListener('keypress', function(e){
            console.log('Pressed!')
        })                      
    </script> 
</body>

下面的代碼與上面的代碼相同，只不過我使用的是函數，在其中我使用的代碼與上面的代碼相同。 但是在這種情況下，我的腳本標簽位於輸入文本標簽之上，並且它可以工作。 在這種情況下如何運作？ 下面是代碼：

<head>
    <script type="text/javascript">   
        function keyPressListener(){
            var txtId = document.getElementById('name');   
            txtId.addEventListener('keypress', function(e){
                console.log('Pressed!')
            })
        }                   
    </script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">

</body>

那么，以上2個代碼之間到底有什么區別？

Answer 1

使用onkeypress屬性時。 實際上，它的工作方式與addEventListener相同。 您只需要編寫一個簡單的函數並在onkeypress調用它

<input type="text" id="name" onkeypress="keyPressed()">

<script>
function keyPressed(){
    console.log('Key Pressed');
}
</script>

Answer 2

為什么不能將其放置在輸入上方 -因為文檔尚未准備好，所以您需要body.onload事件。請參見body onload=start() ，它將在加載body之后應用js函數

 <body onload="start()"> <input type="text" id="name"> <script type="text/javascript"> function start() { var txtId = document.getElementById('name'); txtId.addEventListener('keypress', function(e) { console.log('Pressed!') }) } </script> </body>

第二個 -您在單個事件中使用兩個函數。 因此，與任何一項事件一起使用

如果與內聯按鍵使用keyPressListener() 其他使用按鍵的DOM事件(addEventListener)

*注意：

不要在keyPressListener()包含addEventListener() keyPressListener() 。
如果與addEventListener()一起使用，請刪除標記內聯的onkeypress事件。
因為兩者是同一動作。

 <head> <script type="text/javascript"> function keyPressListener() { console.log('Pressed!') } </script> </head> <body> <input type="text" id="name" onkeypress="keyPressListener()"> </body>

Answer 3

不推薦使用addEventListener

在您的輸入上嘗試以下操作：

添加; 在keyPressListener（）之后：

<input type="text" id="name" onkeypress="keyPressListener();">

如果這樣不起作用，請嘗試以下操作：

<input type="text" id="name" onkeypress="keyPressListener(); return true;">

HTML5知道，當您使用onkeypress屬性when the key is pressed需要調用JavaScript函數。 您基本上可以將任何功能性JavaScript放在onkeypress=" （JavaScript在此處） "屬性的參數中。

您也可以從DOM中獲取元素，然后將事件偵聽器添加到元素中，如下所示：

jQuery： $('#name').onkeypress( function() { //code goes here } );

常規Js： document.getElementById('name').onkeypress( function() { //code goes here } );

javascript onkeypress輸入文字

問題描述

3 個解決方案

解決方案1
2 2017-04-28 06:18:12

解決方案2
2 2017-04-28 06:18:29

解決方案3
0 2017-04-28 06:25:45

javascript onkeypress輸入文字

問題描述

3 個解決方案

解決方案1 2 2017-04-28 06:18:12

解決方案2 2 2017-04-28 06:18:29

解決方案3 0 2017-04-28 06:25:45

解決方案1
2 2017-04-28 06:18:12

解決方案2
2 2017-04-28 06:18:29

解決方案3
0 2017-04-28 06:25:45