Chapter6-JavaScript常用表单操作

第六章

JavaScript常用表单操作智翔集团文本框不允许粘贴<inputtype="text"name="txtName"onpaste="returnfalse"oncontextmenu="returnfalse"

/>得到焦点后全选<inputname="txt1"type="text"onfocus="this.select()"/>回车键可以让光标移到下一个输入框<inputtype="text"name="txtName"onkeydown="if(event.keyCode==13)event.keyCode=9"

/>文本框只允许输入数字<scripttype="text/javascript">varre=/^[0-9.-]*$/;varstr='';functionchecknum(obj){

if(re.test(obj.value)==false){

obj.value=str;

}else{

str=obj.value;}}</script><inputtype="text"name="txtName"onpropertychange="checknum(this)">Checkbox全选Checkbox<script>functioncheckall(formname,checkname,thestate){ varel_collection=eval("document.forms."+formname+"."+checkname) for(c=0;c<el_collection.length;c++) el_collection[c].checked=thestate}</script><formname="test"><inputtype="checkbox"name="v1">Peter<br/><inputtype="checkbox"name="v1">Jane<br/><inputtype="checkbox"name="v1">George<br/><ahref="javascript:checkall('test','v1',true)">CheckAll</a><br/><ahref="javascript:checkall('test','v1',false)">UncheckAll</a></form>下拉框<formaction=""method="post"name="f1"><selectname="cmb1"style="width:100px"><optionvalue="1">湖北</option><optionvalue="2">湖南</option><optionvalue="3">广东</option></select><inputtype="button"name="but1"onclick="javascript:alert(f1b1.options[f1b1.selectedIndex].value)“value="显示选择项的值"><inputtype="button"name="but2"onclick="javascript:alert(f1b1.options[f1b1.selectedIndex].text)"value="显示选择项的显示内容"><inputtype="button"name="but3"onclick="javascript:alert(f1b1.options.length)"value="显示有多少选择项"><inputtype="button"name="but4"onclick="javascript:f1b1.options[3].selected=true"value="选择广东"></form>列表框判断指定值是否包含在列表中functionjsSelectIsExitItem(objSelect,objItemValue){//objSelect：列表框名称//objItemValue：要查找的值

varisExit=false;for(vari=0;i<objSelect.options.length;i++){if(objSelect.options[i].value==objItemValue){isExit=true;break;}}returnisExit;}列表框向select选项中参加一个ItemfunctionjsAddItemToSelect(objSelect,objItemText,objItemValue){if(jsSelectIsExitItem(objSelect,objItemValue)){

//判断是否存在

}else{varvarItem=newOption(objItemText,objItemValue);objSelect.options.add(varItem);}}列表框从select选项中删除一个ItemfunctionjsRemoveItemFromSelect(objSelect,objItemValue){

if(jsSelectIsExitItem(objSelect,objItemValue)){for(vari=0;i<objSelect.options.length;i++){if(objSelect.options[i].value==objItemValue){objSelect.options.remove(i);break;}}}else{

//该select中不存在该项

}}列表框删除select中选中的项functionjsRemoveSelectedItemFromSelect(objSelect){varlength=objSelect.options.length-1;for(vari=length;i>=0;i--){if(objSelect[i].selected==true){objSelect.options[i]=null;}}}列表框修改select选项中value="paraValue"的text为"paraText"functionjsUpdateItemToSelect(objSelect,objItemText,objItemValue){

if(jsSelectIsExitItem(objSelect,objItemValue)){for(vari=0;i<objSelect.options.length;i++){if(objSelect.options[i].value==objItemValue){objSelect.options[i].text=objItemText;break;}}}else{

//不存在

}}列表框设置select中text="paraText"的第一个Item为选中"paraText"functionjsSelectItemByValue(objSelect,objItemText){varisExit=false;for(vari=0;i<objSelect.options.length;i++){if(objSelect.options[i].text==objItemText){objSelect.options[i].selected=true;isExit=true;break;}}if(isExit){

//成功选中

}else{

//该select中不存在该项

}}列表框二个列表框之间选择列表框带Checkbox的列表框列表框二级联动三级联动带查看大图的Image表格动态增加行动态创立表格表格表格隔行换色、鼠标经过变色功能实现检查表格被选行是否包含指定的值表格带排序功能的Table带筛选功能的Table表单遍历表单上所有元素

functionallfrom(){

for(i=0;i<f1.length;i++){

alert(f1[i].name);}

}表单根据ID属性定位元素document.getElementById('txt2').value根据Name属性定位元素document.getElementsByName('txt1')[0].value根据元素类型定位元素vardocnObj=document.getElementsByTagName("input");for(i=0;i<docnObj.length;i++){vardocnObj=document.getElementsBy