使用回车键执行文本字段功能

Use an enter key to perform a text field function

本文关键字：文本 字段 功能 执行 回车      更新时间：2023-09-26

我试图使用的代码。请告诉我我做错了什么。我不是很擅长JavaScript，所以，不要评判。

<!-- Textfield with Floating Label -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="userInput" onkeypress="handle(e)">
    <label class="mdl-textfield__label" for="userInput">Answer Here</label>
  </div>
</form>
<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that rusn
var input = document.getElementById("userInput").value;
    alert(input);
        }
    }
</script>
    </body>
</html>

您可能想传递事件，而不仅仅是e 

<input class="mdl-textfield__input" type="text" id="userInput" onkeypress="handle(event)">


<form action="#">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="userInput" onkeypress="handle(event)">
        <label class="mdl-textfield__label" for="userInput">Answer Here</label>
    </div>
</form>
<script>
    function handle(e) {
        if (e.keyCode === 13) {
            e.preventDefault(); // Ensure it is only this code that rusn
            var input = document.getElementById("userInput").value;
            alert(input);
        }
    }
</script>

最好使用addEventListener代替

document.getElementById('userInput').addEventListener('keypress', function(e) {
    if(e.keyCode === 13) {
        e.preventDefault();
        var input = this.value;
        alert(input);
    }
});
相关文章：