当用户点击输入键时获取用户输入jquery
问题描述:
我是一个完整的初学者编码,并且当用户点击输入键时我无法获得用户输入。我确实有一个提交按钮,当用户点击它时需要用户输入。当用户点击输入键时获取用户输入jquery
<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文件中)我应该添加代码,这将是非常棒的。提前致谢!
答
尝试像这样
<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 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
上调用。