使用DOM设置文本框
1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数。 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下 详细代码 <script language="javascript"> function LessThan(oTextArea){ //返回文本框字符个数是否符号要求的boolean值 return oTextArea.value.length < oTextArea.getAttribute("maxlength"); } </script>
2.设置鼠标经过自动选择文本 首先是鼠标经过时自动聚焦 onmouseover = "this.focus"
其次是 onfocus = "this.select()"
代码实例:
对于多个代码实例,可以使用以下代码进行聚焦
<script type="text/javascript">
function myFocus() {
this.focus();
}
function mySelect() {
this.select();
}
window.onload = function() {
var oForm = document.forms["myForm1"];
oForm.name.onmouseover = myFocus;
oForm.name.onfocus = mySelect;
}
</script>
使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即 它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; for (i = 0; i < aChoices.length; i++) //遍历整个单选项表 if (aChoices[i].checked) //如果发现了被选中项则退出 break; alert("相机品牌是:" + aChoices[i].value); } function setChoice(iNum) { var oForm = document.forms["uForm1"]; oForm.camera[iNum].checked = true; } </script>
单选按钮在表单中即
它是一组供用户选择的对象,但每次只能选一个。每一个都有checked属性,当一项选择为ture时,其它的都变为false.
从以上代码中看出,id和name是不同的,一组单选按钮中它们的name是相同的,只有一个被选中。id则是绑定
或者其它选择作用的。 其中代码中:检查被选中对象的代码是(当某一项的chcked值为ture时,遍历结束) var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; for (i = 0; i < aChoices.length; i++) //遍历整个单选项表 if (aChoices[i].checked) //如果发现了被选中项则退出 break; alert("相机品牌是:" + aChoices[i].value);2.设置多选框 与单选按钮不同,复选框 可以同时选中多个选项进行处理,邮箱中每条邮件之前的复选框就的典型的运用 <script type="text/javascript"> function checkbox() { var str = document.getElementsByName("hobby"); var objarray = str.length; var chestr = ""; for (j = 0; j < objarray; j++) { if (str[j].checked == true) { chestr += str[j].value + ","; } } if (chestr == "") { alert("请先选择一个爱好~!"); } else { alert("您先择的是:" + chestr); } } function changeBoxes(action) { var oForm = document.forms["myForm1"]; var oCheckBox = oForm.hobby; for (var i = 0; i < oCheckBox.length; i++) //遍历每一个选项 if (action < 0) //反选 oCheckBox[i].checked = !oCheckBox[i].checked; else //action为1是则全选,为0时则全不选 oCheckBox[i].checked = action; } </script> 复选框原理利用checked属性布尔值进行确定,全选和不全选可以采用0和1的方式传递参数。3.下拉菜单 下拉菜单是比较常用的表单元素。当它的下拉为单选时,和单选按钮 功能一样,当下拉菜单为多选时multiple="multiple时,功能相当复选框,但所占面积远小于复选框。 下拉菜单的常用属性 属性 说明 length 表示选项个数 selected 布尔值,表示 是否被选中 SelectedIndex 被选中选项的序列号,如果没有选项被选中则为-1,对于多选下拉菜单而言,返回第一个被选中的序号,从0开始计数 text 选项的文本 value 选项的值 type 下拉菜单的类型,单选返回select-one,多选返回select-multiple options 获取选项的数组 ,例如:oSelectBox.options[2],表示下拉菜单oSelectBox第三项i.下拉菜单获取单选值 <script language="javascript"> function checkSingle() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var iChoice = oSelectBox.selectedIndex; //获取选中项 alert("您选中了" + oSelectBox.options[iChoice].text); } </script>ii.下拉菜单为多选时,取值 <script type="text/javascript"> function checkMultiple() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var aChoices = new Array(); //遍历整个下拉菜单 for (var i = 0; i < oSelectBox.options.length; i++) if (oSelectBox.options[i].selected) //如果被选中 aChoices.push(oSelectBox.options[i].text); //压入到数组中 alert("您选了:" + aChoices.join()); //输出结果 } </script> iii.通用取值(下拉单选和多选的情况) <script language="javascript"> function getSelectValue(Box) { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.elements[Box]; //根据参数相应的选择下拉菜单 if (oSelectBox.type == "select-one") { //判断是单选还是多选 var iChoice = oSelectBox.selectedIndex; //获取选中项 alert("单选,您选中了" + oSelectBox.options[iChoice].text); } else { var aChoices = new Array(); //遍历整个下拉菜单 for (var i = 0; i < oSelectBox.options.length; i++) if (oSelectBox.options[i].selected) //如果被选中 aChoices.push(oSelectBox.options[i].text); //压入到数组中 alert("多选,您选了:" + aChoices.join()); //输出结果 } } </script> javascript学习指南_javascript 使用DOM设置文本框、单选按钮、复选框、下拉菜单
http://m.bbyears.com/wangyezhizuo/86459.html
推荐访问: