</pre><p>最近一个界面要求:<img src="data:image/png;base64,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" alt="" /></p><p>四个textbox框,当输入两位数字时触发事件。事件完毕焦点自动跳转到下一个并选定所有内容。</p><p>最开始琢磨了很久,百度对于我这种新手来说真的很有用,可惜的是不会精确使用度娘让我白白花费太多时间了。</p><p>现在就来记录下具体解决方式吧~</p><p><pre name="code" class="html"><anthem:TextBox ID="txtHSCode1" TabIndex="1" runat="server" CssClass="form-control lbChinaControl"
οnchange="if(!/(^[0-9]*$)/.test(value)){value='';bootbox.alert('pls input number');}"
MaxLength="2" Style="text-align: right" οnkeyup="return T1_Onkeyup()"></anthem:TextBox>
重点是onkeup事件:当松掉键盘某一个键之后触发事件。就是说当我在文本框输入了一个0之后,他也会进入事件。那么就需要进行判断是否为两位数。
function T1_Onkeyup() {
if (window.event.keyCode != 9) {
if (document.getElementById("txtHSCode1").value.length == 2) { //判断是否为两位数,若此时为01才进去事件
$("#<%=btntxtHSCode1.ClientID %>").click();//进入后台事件,具体是什么就忽略吧
}
}
}
至于该方法中我加了一个判断,window.even.keycode!=9 -- 9是代表TAB键的意思
这是为了避免用户在第一个框输入了01之后马上按了tab键,焦点就跳转到第二个框了,会产生一系列问题。所以给判断排除掉。
最后在后台事件结束之后再执行前台function:
function T2_Onkeyup2() {
document.getElementById("txtHSCode2").focus();
document.getElementById("txtHSCode2").select();
}
这就是重点了.第一句焦点跳转。第二句内容选中。
按理说C#里面可以后台控制焦点跳转事件:txtHSCode2.focus();
但是我试了很久,不通,然后就麻烦点到JS里面用了。。。
记录到此,再去琢磨下为何后台不行吧~