js中表单事件--formUtil
disabled--获取或者设置表单控件是否禁用
form--指向特定的字段
focus()--光标聚集事件
blur()--光标移开事件
submit()--提交事件
select()---全选事件
onchange()--改变事件
onfocus()--事件
注意formUtil的封装事件使用！
文本框中：<input type="text" size="10" maxlength="100">---最多显示10个，且最大只有100个上限
自动切换代码：
var FormUtil = new Object(); FormUtil.tableForward=function(oTextbox) { var oForm=oTextbox.form; alert("222"); if(oForm.elements[oForm.elements.length-1]!=oTextbox &&oTextbox.value.length==oTextbox.getAttribute("maxlength")) { for(var i=0;i<oForm.elements.length;i++) { if(oForm.elements[i]==oTextbox) { for(var j=i+1;j<oForm.elements.length;j++) { if(oForm.elements[j].type!="hidden") { OForm.elements[i].focus(); return; } } } } } };
掌握textUtil的事件封装：
var TextUtil=new Object();//创建对象 var EventUtil=new Object();
//判断是否达到最大长度 TextUtil.isNotMax=function(oTextarea) { return oTextarea.value.length!=oTextarea.getAttribute("maxlength"); } //返回非在范围内的字符-阻止用户用ctrl+v进行粘贴 TextUtil.blockChars=function(oTextbox,oEvent,bBlockPaste) { oEvent=EventUtil.formatEvent(oEvent); var sInvalid=oTextbox.getAttribute("invalidchars"); var schar=String.fromCharCode(oEvent.charCode); var bIsValid=sInvalid.indexOf(schar)==-1; if(bBlockPaste) { return bIsValid&&(oEvent.ctrlKey&&schar=="v"); } else { return bIsValid||oEvent.ctrlKey; } } //只能输入0-9之间的数字 TextUtil.allowChars=function(oTextbox,oEvent,bBlockPaste) { oEvent=EventUtil.formatEvent(oEvent); var sInvalid=oTextbox.getAttribute("validchars");//只能输入有效的数字 var schar=String.fromCharCode(oEvent.charCode); var bIsValid=sInvalid.indexOf(schar)>-1; if(bBlockPaste) { return bIsValid&&(oEvent.ctrlKey&&schar=="v"); } else { return bIsValid||oEvent.ctrlKey; } }
//失去焦点时的验证 TextUtil.blurBlock=function(oTextbox) { var isValid=oTextbox.getAttribute("invalidchars"); var arr=isValid.split(""); for(var i=0;i<arr.length;i++) { if(oTextbox.value.indexOf(arr[i])>-1) { alert("无效"+arr[i]); oTextbox.focus(); oTextbox.select(); return; } } }
//保证文本框中每一个字符都是有效的 TextUtil.blurAllow=function(oTextbox) { var isValid=oTextbox.getAttribute("validchars"); var arr=isValid.split(""); for(var i=0;i<arr.length;i++) { if(oTextbox.value.indexOf(arr[i])>-1) { alert("无效"+arr[i]); oTextbox.focus(); oTextbox.select(); return; } } } //利用上下按键调整大小 TextUtil.numbericScroll=function(oTextbox,oEvent) { var event=EventUtil.formatEvent(oEvent); var value=oTextbox.value.length==0?0:parseInt(oTextbox.value); var max=oTextbox.getAttribute("max"); var min=oTextbox.getAttribute("min"); if(oEvent.keyCode==38) { if(max==null||value<parseInt(max)) { oTextbox.value=value+1; } } else if(oEvent.keyCode==40) { if(min==null||value>parseInt(min)) { oTextbox.value=value-1; } } }
列表框和组合框的封装：
var ListUtil=new Object();//设置列表的对象
//获取选中的选项的索引指 ListUtil.getSelectedIndexes=function(oListBox) { var arrIndex=new Array; for(var i=0;i<arrIndex.length;i++) { if(oListBox.options[i].selected) { arrIndex.push(i); } } return arrIndex; } //添加选项 ListUtil.add=function(oListBox,sname,svalue) { var option=document.createElement("option"); option.appendChild(document.createTextNode(sname)); option.setAttribute("value",svalue);//设置它的属性 oListBox.appendChild(option); } //删除选项 ListUtil.delete=function(oListBox,index) { oListBox.remove(index);//直接用此方法移除掉即可 } //移动选项从原节点删除，并在放入指定位置 ListUtil.move=function(orignListBox,oListBoxTo,index) { var option=orignListBox.options[index]; if(option!=null) { oListBoxTo.appendChild(option); } } //重排上移 ListUtil.shiftup=function(oListBox,index) { //第一个不能再向上移动 if(index>0) { var option=oListBox.options[index]; var oFinal=oListBox.options[index-1]; oListBox.insertBefore(option,oFinal); } } //重排下移 ListUtil.shiftdown=function(oListBox,index) { //最后一个不能再向下移动 if(index<oListBox.options.length-1) { var option=oListBox.options[index]; var oNext=oListBox.options[index+1]; oListBox.insertBefore(oNext,option); } } window.onload=function() { var oListBox=document.getElementById("selAge"); var oListBox2=document.getElementById("selAge2"); var arrIndexs=ListUtil.getSelectedIndexes(oListBox); //alert("选择的选项个数为"+arrIndexs.length); // ListUtil.add(oListBox,"new text","7"); //ListUtil.move(oListBox,oListBox2,3); //ListUtil.shiftup(oListBox,4); ListUtil.shiftdown(oListBox,4); } /*alert(oListBox.options[0].getAttribute("value")); alert(oListBox.options[0].index); alert(oListBox.options.length); alert("选中的为："+oListBox.selectedIndex); */
TextUtil.autosuggsetMatch=function(sText,arrValues)--要匹配的文本以及要进行匹配的数组
{
var arrresult=new Array;
if(sText!="")
{
for(var i=0;i<arrValues.length;i++)
{
if(arrValues[i].indexOf(sText)==0)//满足条件的字符
{
arrresult.push(arrValues[i]);
}
}
}
return arrresult;
}
TextUtil.autosuggset=function(oTextbox,arrValues,sListBoxid)
{
var oListBox=document.getElementById(sListBoxid);
ListUtil.clear(oListBox);//清空列表
var arrMatches=TextUtil.autosuggsetMatch(oTextbox.value,arrValues);
for(var i=0;i<arrMatches.length;i++)
{
ListUtil.add(oListBox,arrMatches[i]);//将匹配的选项加入到列表框中
}
} </script> </head> <body > <select name="selAge" id="selAge" multiple="multiple"> <option value="1">18-21</option> <option value="2">22-25</option> <option value="3">26-29</option> <option value="4">30-35</option> <option value="5">over 35</option> </select> <select name="selAge2" id="selAge2" multiple="multiple"> <option value="1">18-21</option> <option value="2">22-25</option> </select> </body> </html>
