javascript onkeypress输入文字
[英]javascript onkeypress input text
问题描述
I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. 
我正在学习Javascript。仅当我的脚本标签位于输入文本元素下方时，下面的代码才起作用，但是如果我将代码置于输入文本标签上方，则它无法工作。 May I know why? 我可以知道为什么吗？ Below is code: 下面是代码：
<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>
Below code is same as above except that I am using function, inside which I am using same code as above. 下面的代码与上面的代码相同，只不过我使用的是函数，在其中我使用的代码与上面的代码相同。 But in this case, my script tag is above input text tag, and its working. 但是在这种情况下，我的脚本标签位于输入文本标签之上，并且它可以工作。 How it's working in this case? 在这种情况下如何运作？ Below is the code: 下面是代码：
<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>
So, what exactly difference between above 2 codes? 那么，以上2个代码之间到底有什么区别？
3 个解决方案
解决方案1
2 2017-04-28 06:18:12
When you are using the onkeypress attribute. 使用onkeypress属性时。 It actually works the same way as the addEventListener . 实际上，它的工作方式与addEventListener相同。 You just have to write a simple function and call it in onkeypress 您只需要编写一个简单的函数并在onkeypress调用它
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
解决方案2
2 2017-04-28 06:18:29
Why is not working to place above the input -Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded 为什么不能将其放置在输入上方 -因为文档尚未准备好，所以您需要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>
And the second one -you are using two function in a single event. 第二个 -您在单个事件中使用两个函数。 So use with any one of the event 因此，与任何一项事件一起使用
if use with inline keypress of
keyPressListener()else use Dom event of the keypress(addEventListener)keyPressListener()其他使用按键的DOM事件(addEventListener)
*Note: *注意：
- Dont include the
addEventListener()insidekeyPressListener().不要在keyPressListener()包含addEventListener()keyPressListener()。 - If you use with
addEventListener()remove theonkeypressevent inline of the markup.如果与addEventListener()一起使用，请删除标记内联的onkeypress事件。 - because both are same action . 因为两者是同一动作。
<head> <script type="text/javascript"> function keyPressListener() { console.log('Pressed!') } </script> </head> <body> <input type="text" id="name" onkeypress="keyPressListener()"> </body>
解决方案3
0 2017-04-28 06:25:45
addEventListener is deprecated 不推荐使用addEventListener
Try this on your input: 在您的输入上尝试以下操作：
Add a ; 添加; after keyPressListener(): 在keyPressListener（）之后：
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this: 如果这样不起作用，请尝试以下操作：
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed . HTML5知道，当您使用onkeypress属性when the key is pressed需要调用JavaScript函数。 You can basically put any functional JavaScript in the parameter for the onkeypress=" (JavaScript goes here) " attribute. 您基本上可以将任何功能性JavaScript放在onkeypress=" （JavaScript在此处） "属性的参数中。
You can also just grab the element from the DOM and then add the event listener to the element like so: 您也可以从DOM中获取元素，然后将事件侦听器添加到元素中，如下所示：
jQuery: $('#name').onkeypress( function() { //code goes here } ); jQuery： $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } ); 常规Js： document.getElementById('name').onkeypress( function() { //code goes here } );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.