在输入键上执行函数

frr*_*lod 26 javascript events input listener

我有一个输入,我只想添加一个事件监听器来激活一个函数,当我按下回车键,输入被聚焦时.我如何用纯JS做到这一点?

现在我有:

HTML:

        Enter your wage:<input type="text" id="wage" value ="" size=20>
        <button id="sub">Submit</button>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

    var wage = document.getElementById("wage");
    wage.addEventListener("change", validate);

    var btn = document.getElementById("sub");
    btn.addEventListener("click", validate);
Run Code Online (Sandbox Code Playgroud)

因此,当我单击或更改文本时,函数validate()基本上会激活,但我想通过按Enter来调用它.

Min*_*hev 37

你可以用这个:

var wage = document.getElementById("wage");
wage.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});

function validate(e) {
    var text = e.target.value;
    //validation of the input...
}
Run Code Online (Sandbox Code Playgroud)

现场演示

  • 一个重要的细节 *e.keyCode* 目前已被弃用,新的​​正确方法是 *e.key* **References** //e.keyCode https://developer.mozilla.org/en-US/docs/Web/ API/KeyboardEvent/keyCode //e.key https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key (4认同)
  • +1。虽然你可以用“validate()”替换“alert()”。 (2认同)

Mar*_*cus 7

这是当前接受的答案的一个版本(来自@MinkoGechev),其中使用key而不是 keyCode:

const wage = document.getElementById('wage');
wage.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        validate(e);
    }
});

function validate(e) {
    const text = e.target.value;
    //validation of the input...
}
Run Code Online (Sandbox Code Playgroud)


Kev*_*sox 5

var elem = document.getElementById("wage");
elem.onkeyup = function(e){
    if(e.keyCode == 13){
       validate();
    }
}
Run Code Online (Sandbox Code Playgroud)

工作示例 http://jsfiddle.net/aMgLK/