JQuery的重点在input字段
该页面上的HTML有20个<input>
字段,每个字段的名字和顺序从1到20递增。
如果variablesid
被设置为下一个顺序的id
( id
+ 1),这个函数将导致焦点适用于该字段。 但是,如果在当前input字段外部单击,则input的数字大于10时,最后一个input字段将不会重新获得焦点,但会显示警报。
$(":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(); } });
如何设置最后一个input字段来重新获得焦点?
尝试更换:
$("#"+id).select();
附:
$(this).focus();
在这种情况下, $("#"+id)
和$(this)
是相同的元素,我假设你想在出现错误时focus
元素。
另外:我不相信id
或name
值可以合法地从一个数字开始,你可能需要在它们option1
添加一些类似于option1
, option2
等的东西。它可能会起作用,但也可能导致以后很难debugging的问题。 在谨慎和最佳实践方面最好不要犯错误。
什么是HTML中的id属性的有效值?
编辑 :未能获得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); } });
我很想听听有没有更好的方法来做到这一点或解释。 我怀疑模糊和焦点事件不是按照使先前的方法成为可能的顺序解雇的?
演示: http : //jsfiddle.net/zRWV4/1/
正如在评论中提到的,你最终应该确保该值是一个整数parseInt
或类似(你似乎已经意识到这一点)。
更换
$("#"+id).select();
通过
$("#"+id).focus();
甚至通过
$(this).focus();
您应该parsinginput内的文本,将其与数字进行比较。 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(); } });
(尝试使用.blur()
而不是.focusout()
。但这可能不会帮助)
尝试删除alert()
一段时间 – 它有时可以使焦点问题…
jsFiddle例子
这是我的代码,我会解释我改变了什么:
$('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(); } });
- 我使用
focus()
而不是select()
,这是行不通的。 - 你混淆
id
与select
哪个导致你总是尝试和select$("#input-IDOFSELECTIONINPUT")
而不是$("#input-IDOFWANTEDINPUT")
- 在你的代码中,虽然警告已经被抛出,但其余的代码将继续正常。 它不会在我的代码中。
- 你已经把你想要的结果(
$("#"+id).select();
)置于不理想的状态(input > 10
),实际上从来没有给它机会。 - 最后但并非最不重要,我给了input一个更好的(和有效的)ID。 ID不能以数字开头。