// 为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写; <input type='text' maxlength='1'/> // 只能写1个; <input type='text' maxlength='2'/> <input type='text' maxlength='3'/> function tabForward(evt){ var e = evt || window.event; var target = getTarget(evt); // 判断当前长度是否和指定长度一致; if(target.value.length == target.maxLength){ // 遍历所有字段; for(var i=0; i<fm.elements.length; i++){ // 找到当前字段; if(fm.elements[i]==target){ // 就把焦点移入下一个字段; if(fm.elements[i+1]){ fm.elements[i+1].focus(); } // 中途返回; return; } } } }
三 选择框脚本
选择框是通过<select>和<option>元素创建的;
HTMLSelectElement对象
属性/方法 说明
add(new,rel) 插入新元素,并指定位置;
multiple 布尔值,是否允许多项选择;
options <option>元素的HTMLCollection集合;
remove(index) 移除给定位置的选项;
selectedIndex 基于0的选中项的索引,如果没有选中项,则值为-1;
size 选择框中可见的行数;
// 在DOM中,每个<option>元素都有一个HTMLOptionElement对象,以便访问数据;
HTMLOptionElement对象
属性 说明
index 当前选项在options集合中的索引;
label 当前选项的标签;
selected 布尔值,表示当前选项是否被选中;
text 选项的文本;
value 选项的值;
var city = fm.elements['city']; // HTMLSelectElement; alert(city.options); // HTMLOptionsCollection; alert(city.options[0]); // HTMLOptionElement; alert(city.type); // select-one; // PS:选择框里的type属性有可能是:select-one,也有可能是:select-multiple; // 这取决于HTML代码中有没有multiple属性; alert(city.options[0].text); // 上海text,获取text值; alert(city.options[0].value); // 上海value,获取value值; // PS:操作select时,最好使用HTMLDOM,以为浏览器兼容性比较好; // 如果使用标准DOM,会因为不同的浏览器导致不同的结果; // PS:当选项没有value值的时候,IE会返回空字符串,其他浏览器会返回text值;
2.选择选项
对于只能选择一项的选择框,使用selectedIndex属性最为简单;
复制代码 代码如下:
addEvent(city,'change',function(){
alert(this.selectedIndex); // 得到当前选项的索引,从0开始;
alert(this.options[this.selectedIndex].text); // 得到当前选项的text值;
alert(this.options[this.selectedIndex].value); // 得到当前选项的value值;
});
city.selectedIndex = 1; // 设置selectedIndex可以定位某个索引;
通过option的属性selected(布尔值),也可以设置定位某个索引,设置为true即可;
city.options[0].selected = true; // 设置第一个索引;
selected和selectedIndex区别:
1.selected是返回的布尔值;所以一般用于判断上;
2.selectedIndex返回的是数值,一般用于设置和获取;
复制代码 代码如下:
addEvent(city,'change',function(){
if(this.options[2].selected == true){ // 判断第三个选项是否被选定;
alert('正确!');
}
});