javascript学习指南_javascript 使用DOM设置文本框、单选按钮、复选框、下拉菜单

【www.bbyears.com--Dom教程】

使用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>
    

        

            请输入您的姓名:
            
        

        

            请输入您的密码:
            word" name="passwd" id="passwd" class="txt">
        

        

            
            
        

    

使用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>

    相机品牌：
    

        
        Canon
    

    

        
        Nikon
    

    

        
        Sony
    

    

        
        Olympus
    

    

        
        Samsung
    

    

        
        Pentax
    

    

        
        others
    

    

        
    

    

        
        
    

单选按钮在表单中即它是一组供用户选择的对象，但每次只能选一个。每一个都有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>

    星座：
    

        
            白羊
            金牛
            双子
            巨蟹
            狮子
            处女
            天秤
            天蝎
            射手
            摩羯
            水瓶
            双鱼
        
        
    

    

        
            白羊
            金牛
            双子
            巨蟹
            狮子
            处女
            天秤
            天蝎
            射手
            摩羯
            水瓶
            双鱼
        
        
    

本文来源：http://www.bbyears.com/wangyezhizuo/86459.html