当用户点击输入键时获取用户输入jquery

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

Answer 2

虽然作出的jsfiddle ilijamt的答案有用，它看起来像你的真正问题是与HTML码。清理这些问题将使所有其他事情变得更有意义。

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

• 首先，<li>和<ul>标签，实际上只制作列表（像这样）。我认为你要找的是段落标记的<p>标签。

• 您想要将“输入”绑定到事件，这通常意味着您要使用<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上调用。