javascript - 使用 Enter 键执行文本字段功能

Question

我尝试使用的代码。请告诉我我做错了什么。我不太擅长 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>

Answer 1

您可能想要传递事件，而不仅仅是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);
    }
});