当用户点击时获取用户输入Enter key jquery

Question

我是编码的完整入门者，当用户按下Enter键时，很难获得用户输入。 我确实有一个提交按钮，当用户单击它时会接受用户输入。

 <div>
      <div class="text-area">
        <li class="confirmation">
          <p> 
            Your Guess: 
            <input type="text" id="input" cols="15" rows="1.5"></input>
          </p>
          <button class="btn btn-primary btn-lg submit">Submit
          </button>
          <ul class="lulu">
             <span id='total'> warm </span>
          </ul>
          <ul class="play-again">
            Your game has been restarted, submit a new guess!
          </ul>
        </li> 
      </div>
    </div>

上面的HTML代码和下面的jQuery代码。

$(document).ready(function(){
$(".confirmation").on("click", ".submit", function(){
    // storing myVal as a number not a string by using Number();
    myVal = Number($("#input").val());

    // Push myVal to Array only when myVal is between 0 and 100 
    if (myVal >= 0 && myVal <= 100) {
        arr.push(myVal);
        newArr = arr.slice(0, arr.length-1);
    }

我试图添加

$(document).on("keypress", function(event){
    if (event.keyCode === 13){
        $(".submit").click();
    }
};

到js文件，但没有用。 如果您解释了如何添加此功能以及应该在哪里（在js文件中）添加代码，那就太好了。 提前致谢！

Answer 1

像这样尝试

<div>
    <div class="text-area">
        <li class="confirmation">
            <p> 
            Your Guess: 

                <input type="text" id="input" cols="15" rows="1.5"></input>
            </p>
            <button class="btn btn-primary btn-lg submit">Submit
          </button>
            <ul class="lulu">
                <span id='total'> warm </span>
            </ul>
            <ul class="play-again">
            Your game has been restarted, submit a new guess!
          </ul>
        </li>
    </div>
</div>

而对于您的JavaScript

$(document).ready(function() {
    arr = [];
    newArr = [];
    $(".confirmation").on("click", ".submit", function() {
        // storing myVal as a number not a string by using Number();
        myVal = Number($("#input").val());

        // Push myVal to Array only when myVal is between 0 and 100 
        if (myVal >= 0 && myVal <= 100) {
            arr.push(myVal);
            newArr = arr.slice(0, arr.length - 1);
        }

        $("input#input").val("");
        console.log(arr);
    });

    $('input#input').keyup(function(e) {
        console.log(e.keyCode);
        if (e.keyCode == 13) {
            $('button.submit').click();
        }
    });

});

或者，如果您愿意，可以查看我为您制作的jsfiddle

jsfiddle

Answer 2

尽管ilijamt的答案有效，但在我看来，您的真正问题出在HTML代码上。 清理这些问题将使其他所有事情变得更加有意义。

我将指出一些问题，然后以更好的方式重写它。

• 首先， <li>和<ul>标记实际上仅用于创建列表（如此列表）。 我认为您正在寻找的是段落标记的<p>标记。

• 您想将“ enter”绑定到事件，这通常意味着您想使用<form>元素。 无需听按钮按下，您可以听一个表单提交事件。

JS提琴示例： http : //jsfiddle.net/k4sg3911/1/

HTML代码示例：

<div>

        <form class="myForm">
            <label>Your Guess:</label>
            <input type="text" id="input" cols="15" rows="1.5"/>
            <input type="submit" class="btn btn-primary btn-lg submit"/>
        </form>

        <p class="lulu"><span id='total'>warm</span></p>
        <p class="play-again">Your game has been restarted, submit a new guess!</p>

</div>

示例JS代码：

$(document).ready(function () {

    // Binding not to click, but instead the forms native submit event.
    $(".myForm").on("submit", function (e) {

        // Prevent the default behavior
        e.preventDefault();

        // storing myVal as a number not a string by using Number();
        myVal = Number($("#input").val());

        // Alert myVal
        alert(myVal);

        // ... the rest of your application's code.

    });
});

我会指出重要的一面，

e.preventDefault();

这是要确保表单不提交到页面并刷新页面。 本质上，您是在告诉浏览器“不要担心，我会自己控制此事件。” 在传递给处理函数的e事件对象上调用此方法。