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==Attribute("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!=Attribute("maxlength");
}
//返回⾮在范围内的字符-阻⽌⽤户⽤ctrl+v进⾏粘贴
TextUtil.blockChars=function(oTextbox,oEvent,bBlockPaste)
{
oEvent=EventUtil.formatEvent(oEvent);
var Attribute("invalidchars");
var schar=String.fromCharCode(oEvent.charCode);
var bIsValid=sInvalid.indexOf(schar)==-1;
if(bBlockPaste)
{
return  bIsValid&&(lKey&&schar=="v");
}
else
{
return  bIsValid||lKey;
}
}
//只能输⼊0-9之间的数字
TextUtil.allowChars=function(oTextbox,oEvent,bBlockPaste)
{
oEvent=EventUtil.formatEvent(oEvent);
var Attribute("validchars");//只能输⼊有效的数字
var schar=String.fromCharCode(oEvent.charCode);
var bIsValid=sInvalid.indexOf(schar)>-1;
if(bBlockPaste)
{
return  bIsValid&&(lKey&&schar=="v");
}
else
{
return  bIsValid||lKey;
}
}
//失去焦点时的验证
TextUtil.blurBlock=function(oTextbox)
{
var Attribute("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 Attribute("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 Attribute("max");
var Attribute("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();//设置列表的对象
//获取选中的选项的索引指
{
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  ateElement("option");
option.ateTextNode(sname));        option.setAttribute("value",svalue);//设置它的属性
oListBox.appendChild(option);
}
//删除选项
ListUtil.delete=function(oListBox,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);
}
}
{
var  ElementById("selAge");
var  ElementById("selAge2");
var  SelectedIndexes(oListBox);
//alert("选择的选项个数为"+arrIndexs.length);
// ListUtil.add(oListBox,"new text","7");
//ve(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  ElementById(sListBoxid);
ListUtil.clear(oListBox);//清空列表
var  arrMatches=TextUtil.autosuggsetMatch(oTextbox.value,arrValues);
for(var i=0;i<arrMatches.length;i++)
blur事件
{
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。