Question

我是编码的完全初学者，当用户点击输入密钥时，我无法获得用户输入。我有一个提交按钮，用户在用户点击它时输入。

 <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事件对象上调用的。

当用户点击输入密钥jquery时获取用户输入

2 个答案: