Javascript Jquery 专注于输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7046012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Focus on input field
提问by Somk
The HTML on the page has 20 <input>fields each named and given ID's in increasing order from 1 to 20.
页面上的 HTML 有 20 个<input>字段，每个字段按从 1 到 20 的递增顺序命名和指定 ID。
If the variable idis set to the next sequential id(id+ 1), this function will cause focus to apply to that field. However, when clicking outside of the current input field, the last one input field will not regain focus if the number entered is greater than 10, but an alert will be displayed.
如果变量id设置为下一个顺序id( id+1)，则此函数将使焦点应用于该字段。但是，在当前输入字段之外单击时，如果输入的数字大于 10，最后一个输入字段将不会重新获得焦点，但会显示警告。
$(":input").focusout(function(){
var input = $(this).val();
var id = $(this).attr('id');
if(input > 10){
alert('You must enter a number between 0 and 10 '+id);
$("#"+id).select();
}
});
How can the last input field be set to regain focus?
如何将最后一个输入字段设置为重新获得焦点？
回答by Wesley Murch
Try replacing:
尝试更换：
$("#"+id).select();
With:
和：
$(this).focus();
In this case, $("#"+id)and $(this)are the same element, and I'm assuming you want to focusthe element when there is an error.
在这种情况下，$("#"+id)和$(this)是相同的元素，我假设您想要focus在出现错误时使用该元素。
Aside: I don't believe that idor namevalues can legally start with a number, you may want to prefix them with something like option1, option2, etc. It might work, but it might also cause issues later that are difficult to debug. Best to err on the side of caution and best practices.
旁白：我不相信id或name值可以合法地以数字开头，您可能需要使用类似的前缀他们option1，option2等它可能会奏效，但它也可能会发生问题后难以调试。最好在谨慎和最佳实践方面犯错。
What are valid values for the id attribute in HTML?
Edit: After failing to get focus()to work, I tried with setTimeoutand was able to make it happen. I'm not sure why, or if this is really necessary, but it seems to work.
编辑：无法focus()上班后，我尝试setTimeout并能够实现它。我不确定为什么，或者这是否真的有必要，但它似乎有效。
$(":input").focusout(function(){
var $this = $(this),
input = $this.val();
if (input > 10){
alert('You must enter a number between 0 and 10');
setTimeout(function(){
$this.focus();
}, 1);
}
});
I'd love to hear if there is a better way to do this or an explanation. I suspect that the blur and focus events are not fired in an order that makes the previous method possible?
我很想听听是否有更好的方法来做到这一点或解释。我怀疑 blur 和 focus 事件没有按照使以前的方法成为可能的顺序触发？
Demo: http://jsfiddle.net/zRWV4/1/
演示：http: //jsfiddle.net/zRWV4/1/
As mentioned in the comments, you should eventually make sure the value is an integer with parseIntor similar (you seem to already be aware of this).
正如评论中提到的，您最终应该确保该值是一个整数parseInt或类似的（您似乎已经意识到这一点）。
回答by pixeline
replace
代替
$("#"+id).select();
by
经过
$("#"+id).focus();
or even by
甚至通过
$(this).focus();
回答by TMS
(Try to use .blur()instead of .focusout(). But that probably won't help)
（尝试使用.blur()而不是.focusout()。但这可能无济于事）
Try to remove the alert()for a while - it sometimes can make problems with focus...
尝试删除alert()一段时间 - 它有时会导致焦点问题......
回答by Mohsen
You should parse the text inside the input to compare it with a number. var input = parseInt($(this).val());'
您应该解析输入中的文本以将其与数字进行比较。var input = parseInt($(this).val());'
$(":input").blur(function(){
var input = parseInt($(this).val());
var id = $(this).attr('id');
if(input > 10){
alert('You must enter a number between 0 and 10 '+id);
$("#"+id).select();
}
});
回答by Madara's Ghost
This is my code, I'll explain what I changed:
这是我的代码，我将解释我所做的更改：
$('input[id^="input"]').focusout(function(){
var selected = parseInt($(this).val(), 10);
if (selected <= 10) {
$("#input-"+selected).focus();
}
else {
alert('Invalid Argument! 1-10 only!');
$(this).focus();
}
});
- I use
focus()instead ofselect()which won't work. - You confused
idwithselectwhich caused you to always try and select$("#input-IDOFSELECTIONINPUT")instead of$("#input-IDOFWANTEDINPUT") - In your code, although an alert would have been thrown, the rest of the code would have continued normally. It won't in my code.
- You've put your desired result (
$("#"+id).select();) in the undesired condition (input > 10), which practically never gave it a chance. - Last but not least, I gave the inputs a better (and valid) id. IDs must not start with a number.
- 我用
focus()而不是select()哪个不起作用。 - 你混淆
id了select哪个导致你总是尝试选择$("#input-IDOFSELECTIONINPUT")而不是$("#input-IDOFWANTEDINPUT") - 在您的代码中，虽然会抛出警报，但其余代码会正常继续。它不会在我的代码中。
- 你已经把你想要的结果 (
$("#"+id).select();) 置于不想要的状态 (input > 10)，这实际上从来没有给它机会。 - 最后但并非最不重要的一点是，我为输入提供了一个更好（且有效）的 ID。ID 不能以数字开头。
