JavaScript:在文本输入上按Enter键调用函数

2ekbmq32  于 2022-12-28  发布在  Java
关注(0)|答案(5)|浏览(130)

http://codepen.io/abdulahhamzic/pen/YqMQwB
我怎样才能让它在输入文本时按下回车键,它就调用一个函数呢?我试着用这个:

<input type="text" onkeypress="clickPress()">

但问题是我只想按回车键来调用那个函数,而不想按任何键,我怎么做到呢?
2022年更新:不推荐使用onkeypress。您可以改用onKeyDown

jdgnovmf

jdgnovmf1#

您需要做的是检查事件的键是否为回车键:
在html中,添加事件参数

<input type="text" onkeypress="clickPress(event)">

在处理程序中,添加一个事件参数

function clickPress(event) {
    if (event.keyCode == 13) {
        // do something
    }
}

2022年更新:event.keyCode在许多浏览器上已弃用。

您应该立即执行此操作:

function clickPress(event) {
    if (event.key == "Enter") {
        // do something
    }
}
i34xakig

i34xakig2#

请改用表单(submit事件只运行一次,而不是每次按键都运行):

// Attach the event handler to the form element
document.querySelector('.js-form')?.addEventListener('submit', e => {
  e.preventDefault();
  alert(e.currentTarget.myText.value);
});
<form class="js-form">
  <input type="text" name="myText">
</form>
sg3maiej

sg3maiej3#

Enter按钮的keyCode为13,因此可以通过jQuery使用keypress event

$("input").keypress(function(event) {
    if (event.which == 13) {
        alert("Enter was pressed");
     }
});

或者,在纯javascript中:

<input type="text" onkeypress="clickPress(event)">

function clickPress(event) {
    if (event.keyCode == 13) {
        // do something
    }
}
kqhtkvqz

kqhtkvqz4#

获取事件的keycode并测试它是否为enterkeycode 13

<script>
    function clickPress(e){
    if (event.keyCode == 13) {
        // Enter was pressed
        alert("enter");
    }
  }
</script>

<input type="text" onkeypress="clickPress(event)" />

jsfiddle

vwhgwdsa

vwhgwdsa5#

可能有几种“更好”的方法来做你想做的事情,但只是为了简单起见,你可以这样做:

<input type="text" id="txt">

您可以在<script></script>标记中附加一个事件侦听器,而不是侦听onkeypress,并执行以下操作:

var myText = document.getElementById("txt");
myText.addEventListener("keyup", function(e) {
    if (e.which === 13) {
        //The keycode for enter key is 13
        alert(e.target.value);
    }
});

是的,这绝对是一个重复的问题。

相关问题