在Javascript 中,页面上的每一对
这是与用提交元素不同的地方;
ii > 可以在按钮的提交或点击事件中,使用disabled 属性来禁用用户反复点击提交按钮的行为,
减少服务器的响应负担;
设置文本框
i > 控制文本框的字符个数
function LessThan(_textArea){ |
//返回文本框字符个数是否符号要求的boolean值 |
return _textArea.value.length < _textArea.getAttribute("maxlength"); |
} |
注意:多行文本框
ii > 鼠标经过时,自动选中文本框
window.onload = function(){ |
var txtName = document.getElementsByName("myName")[0]; |
txtName.onmouseover = function(){ |
this.focus(); |
}; |
txtName.onfocus = function(){ |
this.select(); |
}; |
} |
实现了行为与结构的分离。
设置单选按钮
获取选中的单选按钮 & 设置单选按钮被选中
//获取选中项 |
function getChoice(){ |
var oForm = document.forms["myForm1"]; |
//radioName是单选按钮的name属性值 |
var aChoices = oForm.radioName; |
//遍历整个单选项表 |
for(i=0;i |
if(aChoices[i].checked) |
break; //如果发现了被选中项则退出 |
alert("您选中的是:"+aChoices[i].value); |
} |
//设置选中项 |
function setChoice(_num){ |
var oForm = document.forms["myForm1"]; |
//radioName是单选按钮的name属性值 |
oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false |
} |
//调用代码 |
需要保证同一组单选按钮的name 属性值相同即可。
设置复选框
设置复选框的“全选”、“全不选”及“反选”功能
function changeBoxes(_action){ |
var myForm = document.forms["myForm1"]; |
//myCheckbox 为所有复选框的name属性值 |
var oCheckBox = myForm.myCheckbox; |
for(var i=0;i |
if(_action < 0)//反选 |
oCheckBox[i].checked = !oCheckBox[i].checked; |
else |
//_action为1是则全选,为0时则全不选 |
oCheckBox[i].checked = _action; |
} |
aa |
bb |
设置下拉列表框
下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。
下拉列表框默认只能选中一项,若要设置为可以选中多项,则
type 属性:javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为:select-multiple 或 select-one (注意:下拉列表框的类型由multiple 属性控制)
i > 查看下拉列表框的选项(单选项 & 多选项)
function getSelectValue(_myselect){ |
var oForm = document.forms["myForm1"]; |
//根据参数(下拉列表框的name属性值)获得下拉菜单项 |
var oSelectBox = oForm.elements[_myselect]; |
//判断是单选还是多选 |
if(oSelectBox.type == "select-one"){ |
var iChoice = oSelectBox.selectedIndex; //获取选中项 |
alert("单选,您选中了" + oSelectBox.options[iChoice].text); |
} |
else{ |
var aChoices = new Array(); |
//遍历整个下拉菜单 |
for(var i=0;i |
if(oSelectBox.options[i].selected)//如果被选中 |
//压入到数组中 |
aChoices.push(oSelectBox.options[i].text); |
//输出结果 |
alert("多选,您选了:" + aChoices.join()); |
} |
} |
ii > 添加下拉列表框的选项
追加新选项到末尾
function AddOption(Box){ //追加选项到末尾 |
var oForm = document.forms["myForm1"]; |
var oBox = oForm.elements[Box]; |
var oOption = new Option("乒乓球","Pingpang"); |
oBox.options[oBox.options.length] = oOption; |
} |
插入新选项到指定位置
function AddOption(_select,_num){ |
var oForm = document.forms["myForm1"]; |
var oBox = oForm.elements[_select]; |
var oOption = new Option("text值","value值"); |
//兼容IE7,先添加选项到最后,再移动 |
oBox.options[oBox.options.length] = oOption; |
oBox.insertBefore(oOption,oBox.options[_num]); |
} |
注意:如果直接使用insertBefore( ) 方法插入选项,将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug ,只能使用先追加新选项到末尾,然后再使用insertBefore( ) 方法将其移动到相应的位置。
类似这样:为了跳过浏览器的某些bug 或限制,实现预定目的的小技巧,通常称之为hack 。
iii > 替换某一选项
//替换选项 |
function ReplaceOption(_select,_num){ |
var oForm = document.forms["myForm1"]; |
var oBox = oForm.elements[_select]; |
var oOption = new Option("text值","value值"); |
oBox.options[_num] = oOption; //替换第_num 个选项 |
} |
通过oBox.options[_num] = oOption 直接将创建的新选项替换掉指定位置的选项。
iv > 删除某一选项
function RemoveOption(_select,_num){ |
var oForm = document.forms["myForm1"]; |
var oBox = oForm.elements[_select]; |
oBox.options[_num] = null; //删除选项 |
} |
...... |
直接通过oBox.options[_num] = null 删除选项。
Atas ialah kandungan terperinci HTML中表单form的相关知识说明. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!