执行功能上的回车键(execute function on enter key)

2019-08-31 05:46发布

我有一个输入和我只是想添加一个事件监听器为它激活功能,当我按回车键,当输入集中。 如何做到这一点用纯JS?

现在,我有:

HTML:

        Enter your wage:<input type="text" id="wage" value ="" size=20>
        <button id="sub">Submit</button>

使用Javascript:

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

    var btn = document.getElementById("sub");
    btn.addEventListener("click", validate);

所以基本上功能的validate()激活,当我点击或更改文本,但我想按enter调用它。

Answer 1:

您可以使用此:

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

这里现场演示



Answer 2:

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

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



Answer 3:

这是目前公认的答案(来自@MinkoGechev)同一个版本键代替键代码:

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


Answer 4:

如果您的按钮元素更改为

<input type="submit" value="Submit">

它将与你的键盘上的回车键工作。



Answer 5:

你可能会需要像wage.addEventListener('keydown', validate);

然后,您的验证功能,需要检查event.keyCode == 13来确定“进入”按键。



Answer 6:

或使用jQuery

$("#wage").on("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});


Answer 7:

$(document).on("keyup", function(e) {
    var key = e.which;

    if (key == 13) // the enter key ascii code
    {
        login();
    }
});


文章来源: execute function on enter key