6. JavaScript开发中表格与表单技术（二）

2020-08-12 本文已影响0人辘轳鹿鹿

6.4 设置文本框

表单中的文本框分为单行文本框、多行文本框和密码框，它是表单中非常重要的对象，可以让用户自己输入内容。

6.4.1 控制用户输入字符个数

由于数据库的字段长度是固定的，因此在进行字符输入时，就要控制字符的个数不能超过字段的长度。单行文本框和密码框可以通过自身的 maxlength 属性来限制用户输入字符的个数。

<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10">

在多行文本框中没有maxlength属性，所以不能使用这种方法来限制输入的字符数，因此需要自定义这样的属性来控制输入字符的个数

<script language="javascript">
function LessThan(oTextArea){
    //返回文本框字符个数是否符号要求的boolean值
    return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
/*键盘按键被按下并释放一个键时会返回LessThan()函数的返回值。返回false时用户不能再输入字符*/
</script>

<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>

<textarea> 标签定义多行的文本输入控件。

6.4.2 设置鼠标经过时自动选择文本

在很多网页中，如注册登录页面，经常为了方便用户操作，使用户鼠标经过文本框时光标可以立刻停留在该文本框内并可以选中默认值，而无须用户单击鼠标。这就需要先设置一个鼠标事件，使鼠标经过时可以自动聚焦，然后设置聚焦后自动选择文本。

<input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">

6.5 设置单选按钮

单选按钮用标签<input type="radio">表示，它主要用于在表单中进行单项选择，单项选择的实现是通过对多个单选按钮设置同样的name 属性值和不同的选项值。例如，使用两个单选按钮，设置这两个控件的 name 值均为 sex，选项值一个为女，一个为男，从而实现从性别中选择一个的单选功能。
单选按钮有一个重要的布尔属性checked，用来设置或者返回单选按钮的状态。一组name 值相同的单选按钮中，如果其中一个按钮的checked 属性值被设置为了true，则其他按钮的checked 属性值就默认为 false。

6.6 设置复选框

复选框用标签 <input type="checkbox"> 表示，它和单选按钮一样都是用于在表单中进行选择，不同的是单选按钮只能选中一项，而复选框可以同时选中多项。在设计网页时，常常为了方便用户使用，会在一组复选框下面添加全选、全不选和反选按钮。

<script language="javascript">
/*全选*/
function checkAll() { 
   var objCheckbox=document.form1.getFun;
   for (var i = 0; i <= objCheckbox.length; i++) {
      objCheckbox[i].checked=true;
   }
}
/*全不选*/
function noCheck() {
   var objCheckbox=document.form1.getFun;
   for (var i =0; i <= objCheckbox.length; i++) {
      objCheckbox[i].checked=false;
   }
}
/*反选*/
function switchCheck() {
   var objCheckbox=document.form1.getFun;
   for (var i = 0; i <= objCheckbox.length; i++) {
      objCheckbox[i].checked=!objCheckbox[i].checked;    
   }
}
</script>

 <p>
 <input type="checkbox" name="getFun" id="TV" value="TV" />
 <label for="TV">电视</label>
 </p>

6.7 设置下拉菜单

下拉菜单是表单中一种比较特殊的元素。一般的表单元素都是由一个标签表示的，但它必须由两个标签 <select> 和 <option> 来表示，<select> 表示下拉菜单，<option> 表示菜单中的选项。另外，除了具有表单元素的公共属性外，下拉菜单和下拉菜单选项还有一些自己的属性，一些常用的属性如下。

value：指定下拉菜单选项的 value 值。
text：指定下拉菜单选项的文本值，即在下拉菜单中显示的文本值。
type：指定下拉菜单的类型是单选还是多选。
selected：声明选项是否被选中，该属性值为布尔值。
selectedIndex：声明被选中选项的索引。从 0 开始计数，若选项没有被选中则该属性值为 -1。
options：下拉菜单选项 <option> 的数组。
length：下拉菜单选项数组的长度，即下拉菜单选项的个数。

6.7.1 访问选项

访问下拉菜单中的选中项是对下拉菜单最重要的操作之一。下拉菜单有两种类型：单选下拉菜单和多选下拉菜单。

单选下拉菜单：通过selectedIndex属性即可访问

<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //获取选中项
    alert("您选中了" + oSelectBox.options[iChoice].text);
}
</script>



<form method="post" name="myForm1">
<label for="constellation">请选择您的星座</label>
<p>
<select id="constellation" name="constellation">
    <option value="Aries" selected="selected">白羊座</option>
    <option value="Taurus">金牛座</option>
    <option value="Gemini">双子座</option>
    <option value="Cancer">巨蟹座</option>
    <option value="Leo">狮子座</option>
    <option value="Virgo">处女座</option>
    <option value="Libra">天秤座</option>
    <option value="Scorpio">天蝎座</option>
    <option value="Sagittarius">射手座</option>
    <option value="Capricorn">摩羯座</option>
    <option value="Aquarius">水瓶座</option>
    <option value="Pisces">双鱼座</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看结果" />
</form>

多选下拉菜单

<script language="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>

<select id="constellation" name="constellation" multiple="multiple" style="height:180px;"></select>

有时单选下拉菜单和多选下拉菜单会同时出现在同一个页面表单中，这是为了节省系统资源，可以先通过type属性来判断下拉菜单类型，然后根据不同类型进行不同的方法来获取选中项的值。

6.7.2 添加选项

<script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("《神奇的校车》","Qbook");
    //兼容IE7，先添加选项到最后，再移动
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

<input type="button" value="添加《神奇的校车》" onclick="AddOption('book',1);" />

6.7.3 删除选项

<script language="javascript">
function RemoveOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    oBox.options[iNum] = null;  //删除选项
}
</script>

6.7.4 替换选项

<script language="javascript">
function ReplaceOption(Box,iNum){   //替换选项
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("国学《唐诗》","Tbook");
    oBox.options[iNum] = oOption;   //替换第iNum个选项
}
</script>