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>

那么，上面两个代码究竟有什么区别？

Answer 1

使用onkeypress属性时。它实际上与addEventListener的工作方式相同。您只需编写一个简单的函数并在onkeypress

中调用它

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

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

Answer 2

为什么不在输入之上 - 因为文件没有准备好。所以你需要body.onload事件。看到身体onload=start()它将在装载身体后应用js功能

＆＃13;

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

＆＃13;

第二个 - 您在一个事件中使用两个函数。因此，请使用任何一个事件

如果与keyPressListener() 其他的内联按键一起使用，则使用该事件的Dom事件 keypress (addEventListener)

*注意：

请勿在{{1}}内添加addEventListener()。
如果您与keyPressListener()一起使用，请删除内联标记的addEventListener()事件。
因为两者都是同一行动。

＆＃13;

onkeypress

＆＃13;

Answer 3

addEventListener已弃用

在您的输入上尝试此操作：

在keyPressListener（）之后添加;：

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

如果这不起作用，请尝试：

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

HTML5知道当您使用onkeypress属性时，它需要调用JavaScript函数when the key is pressed。您基本上可以在onkeypress="（JavaScript在这里）"属性的参数中添加任何功能JavaScript。

您也可以从DOM中获取元素，然后将事件侦听器添加到元素中，如下所示：

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

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

javascript onkeypress输入文字

3 个答案: