如何把表单设置屏幕中间(如何控制表单内tab键切换的顺序)
如何把表单设置屏幕中间(如何控制表单内tab键切换的顺序)<script type="text/javascript"> function handleEnter (field event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { var i; for (i = 0; i < field.form.elements.length; i ) if (field == field.form.elements[i]) break; do {
填写表单的时候,经常用鼠标点击输入框的行为是十分累人的,经常上网的同学估计都会使用tab键进行表单输入框之间的切换。
在html代码中有一个键盘属性——tabindex,它可以设置访问者在页面中按tab键的顺序。如下:
<input type="button" id="b1" tabindex="1" value="Button1" />
<input type="button" id="b2" tabindex="2" value="Button2" />
<input type="button" id="b3" tabindex="3" value="Button3" />
当用户选择第一个输入框再按tab键,输入框的焦点就会按照定义好的顺序切换。 tabindex不仅可以用于输入框间的切换,也可以用于链接之间的切换。方法和上面相同。 在没有定义属性值的时候,tabindex的默认值是0。如果将tabindex设为负值(tabindex="-1"),这个元素会被排除在tab键切换的范围之外。
录入系统需要用户输入相关数据,但用户习惯在excel中回车继续输入下一个项目。
<script type="text/javascript">
function handleEnter (field event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i )
if (field == field.form.elements[i])
break;
do {
i = (i 1) % field.form.elements.length;
}while(field.form.elements[i].type != 'text' ) //可扩展到其他比如select 值了,避开label
field.form.elements[i].focus();
//window.event.keyCode=9
return false;
}
else
return true;
}
</script>
页面
echo "<td><input type='text' name='ps[]' value='".$row['profit']."' onkeypress=\"return handleEnter(this event)\" /></td>";
echo "<td><input type='text' name='is[]' value='".$row['initasset']."' onkeypress=\"return handleEnter(this event)\" /></td>";
echo "<td><input type='text' name='us[]' value='".$row['useasset']."' onkeypress=\"return handleEnter(this event)\" /></td>";