admin管理员组

文章数量:1355570

Hello I am trying to run a javascript function when I press enter. Here is my code so far

MY HTML

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <div>
        <form id="inputForm">
            <label for="userInput">Input : </label>
            <span id="userInputSpan">
                <input type="text" id="userInput" onkeydown="readInput(this)" />
            </span>
        </form>
    </div>
</body>

</html>

MY JAVASCRIPT

function readInput(e) {
    if (e.keyCode == 13) { // 13 is enter key
        // Execute code here.
        // var temp = e.value;
        // console.log(temp);
        alert(e.value);
    }
}

Here is my JSBin

Hello I am trying to run a javascript function when I press enter. Here is my code so far

MY HTML

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <div>
        <form id="inputForm">
            <label for="userInput">Input : </label>
            <span id="userInputSpan">
                <input type="text" id="userInput" onkeydown="readInput(this)" />
            </span>
        </form>
    </div>
</body>

</html>

MY JAVASCRIPT

function readInput(e) {
    if (e.keyCode == 13) { // 13 is enter key
        // Execute code here.
        // var temp = e.value;
        // console.log(temp);
        alert(e.value);
    }
}

Here is my JSBin

  • javascript
  • html
Share Improve this question edited Nov 17, 2015 at 4:57 gkmohit asked Nov 17, 2015 at 4:33 gkmohitgkmohit 7102 gold badges12 silver badges30 bronze badges 4
  • Possible duplicate of How to detect pressing enter on keyboard using jquery? – Keval Bhatt Commented Nov 17, 2015 at 4:48
  • @KevalBhatt I am not allowed to use Jquery unfortunately . . Jquery would make life so much easier if I were allowed to use it :( – gkmohit Commented Nov 17, 2015 at 4:52
  • 1 What is the reason for not being allowed to use jquery? – Morgan Green Commented Nov 17, 2015 at 4:57
  • @MorganGreen it is just the assignment requirement :) I was stuck with this issue, hence I asked :) – gkmohit Commented Nov 17, 2015 at 4:59
Add a ment  | 

4 Answers 4

Reset to default 7

You're passing this to the event handler and using it as event object.

Pass the element instance and event object to the event handler.

<input type="text" id="userInput" onkeydown="readInput(this, event)" />
                                                       ^^^^  ^^^^^

And get them in the handler

function readInput(el, e) {
                   ^^  ^
// el: Element
// e: Event object

Updated JSBin

window.onload = function() {
  document.getElementById("userInput").focus();
};

function readInput(el, e) {
  if (e.keyCode == 13) {
    console.log(el.value);
  }
}
<div>
  <form id="inputForm">
    <label for="userInput">Input :</label>
    <span id="userInputSpan">
      <input type="text" id="userInput" onkeydown="readInput(this, event)"/>
    </span>
  </form>
</div>

Suggestions:

  1. Use DOMContentLoaded event instead of using onload.
  2. Use addEventListener to bind event
  3. To set focus on page load, use autofocus attribute on input
  4. To prevent form from submit, use return false; or event.preventDefault() from event handler.

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('userInput').addEventListener('keydown', function(e) {
    if (e.keyCode == 13) {
      console.log(this.value);
      
      e.preventDefault(); // Prevent default action i.e. submit form
      // return false;
    }
  }, false);
});
<div>
  <form id="inputForm">
    <label for="userInput">Input :</label>
    <span id="userInputSpan">
      <input type="text" id="userInput" autofocus />
    </span>
  </form>
</div>

Here is the plain javascript I used. Hope it helps you.

document.onkeyup = function(e){
    if(e){
        var key = window.event ? e.keyCode : e.which;
    }else{
        var key = window.event ? event.keyCode : event.which;
    }
    if (key == '13') {
        //Code you would like to execute
    }
}

Rather, I'd suggest not to embed JavaScript in HTML.

document.addEventListener('keydown', function(e) {
  if ( e.keyCode == 13 ) {
    var ele = document.getElementById('userInput');
    alert(ele.value);
  }
});
<form id="inputForm" >
  <label for="userInput">datt1939 : </label>
  <span id="userInputSpan">
    <input type="text" id="userInput">
  </span>
</form>

Since StackOverflow sandbox prevents alert from firing, here's a JSFiddle.

There are couple of ways it can be done

Inline Event

<input type="text" value="" onKeyDown="if(event.keyCode==13) alert('Inline Event');" size="20" id="demo1" placeholder="Inline Event">

Unobtrusive Code using addEventListener

<input type="text" id="demo2" value="" size="20" placeholder="Using addEventListener">

Unobtrusive Code Calling a function

<input type="text" id="demo3" value="" onKeyUp="executeEvent(this,value)" size="20" placeholder="Seperate Handler">

JS

Attaching addEventListener to the DOM element

document.getElementById('demo2').addEventListener('keydown',function(event) {
    if (event.keyCode == 13) {
        alert('5');
    }
})

executeEvent function

function executeEvent(elem,value){
 console.log(elem)
if (event.keyCode == 13) {
        alert('You entered ' +elem.value);
    }
}

Here is JSFIDDLE

本文标签： htmlRun javascript function when enter is pressedJavaScript only no JqueryStack Overflow

版权声明：本文标题：html - Run javascript function when enter is pressed - JavaScript only no Jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743976795a2570911.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。