表单脚本

最新推荐文章于 2020-12-28 20:25:12 发布

neverland-7

最新推荐文章于 2020-12-28 20:25:12 发布

阅读量899

点赞数

分类专栏： javascript学习笔记文章标签：表单

本文链接：https://blog.csdn.net/neverland_7/article/details/26360859

版权

javascript学习笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

表单基础知识

在javascript中，表单对应的是HTMLFormElement类型，它继承了HTMLElement类型，因而有与其他HTML元素具有相同的属性，不过，它还有自己独有的属性和方法，如下表所示：

属性/方法	说明
acceptCharset	服务器能处理的字符集；等价于HTML中的accept-charset特性。
action	接收请求的URL；等价于HTML中的action特性。
elements	表单中所有控件的集合。
enctype	请求的编码类型；等价于HTML中的enctype特性。
length	表单中控件的数量。
method	要发送的HTTP类型请求，通常是'get'或'post'；等价于HTML的method特性。
name	表单名称；等价于HTML的name特性。
reset()	将所有表单域重置为默认值。
submit()	提交表单。
target	用于发送请求和接收响应的窗口名称；等于HTML中的target特性。

获取表单

获取表单有两种方法，第一种是将它看成与其他元素一样，为其设置id，然后通过getElementById来获取。假设现在页面上有一个表单，其id值为'form1'，则：

var form=document.getElementById('form1');

第二种方法是通过document.forms来获取。document.forms能获取页面中的所有表单，在这个集合中，可以通过数值索引或name值来取得特定的表单。

var form1=document.forms[0]; //取得页面中第一个表单
var form2=document.forms['myForm']; //取得页面中name值为‘myForm’的表单

提交表单

提交表单广义上也有两种方法，第一种是通过按钮来进行提交，下面给出的三种形式的按钮，当获得焦点时都可以用于提交表单：

    <!--通用提交按钮-->
    <input type="submit" value="提交">
    
    <!--自定义提交按钮-->
    <button type="submit">提交</button>
    
    <!--图像按钮-->
    <input type="image" src='gtaphic.gif'>

用上面的方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样我们就可以借此机会进行验证表单，以决定是否提交。

第二种提交表单的方法是调用submit()方法。这种方法无需表单包含提交按钮，任何时候都可以正常提交：

var form=document.forms['myForm'];
form.submit();

调用submit()方法提交表单，不会触发submit事件，因此要记得在调用此方法前验证表单数据。

重置表单

所谓的重置表单，就是将所有表单字段都恢复到页面刚加载完毕时的初始值。第一种方法也是通过点击按钮进行重置，使用时将type属性设置为'reset‘即可：

<!--通用重置按钮-->
<input type="reset" value="重置">
    
<!--自定义重置按钮-->
<button type="reset">重置</button>

当用户单机重置按钮时，会触发reset事件。

第二种方法就是调用前面提到的reset()方法：

var form=document.forms['myForm'];
form.reset();

调用reset()方法会触发reset事件，这与调用submit()方法时，有所不同。

表单字段

可像访问其他元素一样，使用DOM方法访问表单元素。此外，每个表单都有elements属性，表示该表单中所有字段的集合。每个表单字段在elements集合中的顺序，与他们出现在标记中的顺序相同，可以按照位置或者name属性来访问它们。

var form=document.forms['myForm'];
	
var field1=form.elements[0]; //取得表单中第一个字段
	
var field2=form.elements['myText']; //取得表单字段中名为‘myText’的字段
	
var fieldLen=form.elements.length; //取得表单字段个数

如果表单中有多个字段的name值相同（如单选按钮），则会返回以该name命名的一个NodeList。来看个例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form method="post" id="myForm">
   <ul>
      <li><input type="radio" name="color" value="red">red</li>
      <li><input type="radio" name="color" value="yellow">yellow</li>
      <li><input type="radio" name="color" value="blue">blue</li>
   </ul>
</form>
<script type="text/javascript">
var form=document.getElementById('myForm');

var colorFields=form.elements['color'];
alert(colorFields.length); //3

var firstColorFields=colorFields[0];
var firstFormFields=form.elements[0];
alert(firstColorFields==firstFormFields);  //true
</script>
</body>
</html>

1.共有的表单字段属性

所有表单字段都拥有一组相同的属性，如下：

属性	说明
disabled	布尔值，表示当前字段是否被禁用。
form	指向当前字段所属的表单的指针；只读。
name	当前字段的名字。
readOnly	布尔值，表示当前字段是否只读。
tabIndex	表示当前字段的切换（tab）序号。
type	表示当前字段的类型。
value	当前字段将被提交给服务器的值。对于文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

除了form属性之外，都可以通过javascript来动态修改属性值。例如，页面上有一个id为'myForm'的表单，修改它的第一个字段的value值：

var form=document.forms['myForm'];
	
var field1=form.elements[0]; //取得表单中第一个字段
	
field1.value='Another value'; //修改value值

2.共有的表单字段方法

所有表单字段都有两个方法：

方法	说明
focus()	用于将浏览器的焦点设置到该表单字段上，级激活表单字段。
blur()	从元素中移走焦点。

HTML5中新增了autofocus属性，在支持这个属性的浏览器中，只要设置了该属性，就会自动将焦点移到对应的字段上。

可以像这样浏览器是否支持autofocus属性：

elements.autofocus!==true

autofocus是一个布尔值，在支持它的浏览器中，它的值为true，在不支持的浏览器中，它的值将是空字符串。那么，这样以来，就可以判断，在支持它的浏览器中使用它来获得焦点，在不支持它的浏览器中使用focus方法来获得焦点了。

3.共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件外，所有表单字段还都支持以下3个事件：

事件	说明
blur	当前字段失去焦点时触发。
focus	当前字段获得焦点时触发。
change	对于<input>和<textarea>元素，它们在失去焦点且value值改变时触发；对于<select>元素，在其选项改变时就触发。

文本框脚本

在HTML中有两种文本框，一种是单行文本框，另一种是多行文本框。

单行文本框是将<input>元素的type特性设置为‘text’。它有以下特性：

size：指定文本中能够显示的字符数；
value：可以设置文本框的初始值；
maxlength：用于指定文本框可以接受的最大字符数。

来看一个例子：

<input type="text" size="25" maxlength="50" value="initial value">

上面这行代码创建了一个文本框，它能够显示25个字符，但不能输入超过50个字符。

多行文本框是由<textarea>元素来呈现的，它可以通过以下特性来指定大小：

rows：指定文本框的字符行数；
cols：指定文本框的字符列数。

多行文本框的初始值必须放在<textarea>和</textarea>直接，并且它不能在HTML中指定最大字符数。

来看一个多行文本框的例子：

<textarea rows="5" cols="25">initial value</textarea>

上面这行代码创建了一个25列，5行的多行文本框。

不管是多行文本框还是单行文本框，都会将用户输入的内容保存在value属性中，可通过这个属性来读取或设置文本框的值：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form>
<textarea rows="5" cols="25">initial value</textarea>
</form>
<script type="text/javascript">

var form=document.forms[0];

var field1=form.elements[0]; 

field1.value='Another value';
</script>
</body>
</html>

注意：若要修改文本框的value值，最好使用字段的value属性来设置，而避免使用DOM方法（即不要使用setAttribute()设置value特性，也不要去修改<textarea>元素的第一个子节点），因为对value属性的修改，不一定会反应在DOM中。

选择文本

上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。该方法不接受参数。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form>
<textarea rows="5" cols="25">initial value</textarea>
</form>
<script type="text/javascript">

var form=document.forms[0];

var field1=form.elements[0]; 

field1.select();
</script>
</body>
</html>

1.选择事件

与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。到底什么时候触发select事件，因浏览器而异。

2.取得选择的文本

HTML5有两个属性，用于取得选择的文本，它们分别是：selectionStart和selectionEnd。这两个属性都保存基于0的数值，表示所选择的文本范围。

ie8及之前的版本不支持这两个属性，但是，提供了document.selection对象，它保存着用户在整个文档范围内选择的文本信息。但是，要取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。

因此，可以得到一个跨浏览器的，取得文本的函数：

function getSelectedText(textbox){
   if(typeof textbox.selectionStart=='number'){
      return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
   }else if(document.selection){
      return document.selection.createRange().text;
   }
}

3.选择部分文本

HTML5提供了setSelectionRange()方法，用于选择文本框中的部分文本。它接收两个参数，第一个参数是要选择的第一个字符的索引；第二个参数是要选择的最后一个参数的索引。

ie8不支持部分选择文本的这个方法，但是也有对应的解决办法。

下面就给出跨浏览器实现选择部分文本的方法：

function selectText(textbox,startIndex,stopIndex){
   if(textbox.setSelectionRange){  //支持setSelectionRange()方法时
      textbox.setSelectionRange(startIndex,stopIndex);
   }else if(textbox.createTextRange){  //不支持setSelectionRange()方法时
	  var range=textbox.createTextRange(); //创建范围
	  range.collapse(true); //将范围折叠到文本框开始处
	  //使用moveStart()和moveEnd()方法将范围移动到位
	  range.moveStart('character',startIndex);
	  range.moveEnd('character',stopIndex-startIndex);
	  range.select(); //选择文本
	  textbox.focus(); //想要在文本框中看到文本被选择的效果，还必须让文本框获得焦点
   }
}

来看一个具体的例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form>
<input id="mytext" type="text">
</form>
<script type="text/javascript">
function selectText(textbox,startIndex,stopIndex){
   if(textbox.setSelectionRange){  //支持setSelectionRange()方法时
      textbox.setSelectionRange(startIndex,stopIndex);
   }else if(textbox.createTextRange){  //不支持setSelectionRange()方法时
	  var range=textbox.createTextRange(); //创建范围
	  range.collapse(true); //将范围折叠到文本框开始处
	  //使用moveStart()和moveEnd()方法将范围移动到位
	  range.moveStart('character',startIndex);
	  range.moveEnd('character',stopIndex-startIndex);
	  range.select(); //选择文本
	  textbox.focus(); //想要在文本框中看到文本被选择的效果，还必须让文本框获得焦点
   }
}

var textbox=document.getElementById('mytext');

textbox.value='Hello world!';

selectText(textbox,0,3);
</script>
</body>
</html>

这个例子，在chrome,ie,safari上看都会看出选择了’Hel‘的效果，像这样：

在firefox上没有看到这样效果，带求证。

选择框脚本

选择框除了所有表单字段共有的属性和方法之外，还有下列属性和方法：

属性/方法	说明
add(newOption,relOption)	向控件中插入新<option>元素，其位置在相关项（relOption）之前。
multiple	布尔值。表示是否允许多项选择；等价于HTML中的multiple特性。
options	控件中所有<option>元素集合。
remove(index)	移除给定位置的选项。
selectedIndex	基于0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中的第一项的索引。
size	选择框中可见的行数；等价于HTML的size特性。

另外，选择框的type属性不是’select-one‘，就是’select-multiple'，这取决于HTML代码中有没有multiple特性。

选择框的value属性由当前选中项决定，规则如下：

如果没有选中项，则选择框的value属性保存空字符串。
如果有一个选中项，而且该项的value特性已经在HTML中指定，则选择框的value属性等于选中项的value特性。即使value特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的value特性在HTML中未指定，则选择框的value属性等于该项的文本。
如果有多个选中项，则选择框的value属性将依据前两条规则取得第一个选中项的值。

针对这个规则，我们一起来看个例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form method="post">
  <select name="location" id="selLocation">
     <option value="Sunnyvale, CA">Sunnyvale</option>
     <option value="Los Angeles, CA">Los Angeles</option>
     <option value="Mountain View, CA">Mountain View</option>
     <option value="">China</option>
     <option>Australia</option>
  </select>
<form>
<script type="text/javascript">
var selectbox=document.getElementById('selLocation');
alert(selectbox.options[0].value); //Sunnyvale, CA
alert(selectbox.options[3].value); //空字符串
alert(selectbox.options[4].value); //Australia
</script>
</body>
</html>

在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示，它有下列属性：

属性	说明
index	当前选项在options集合中的索引。
label	当前选项的标签；等价于HTML中的label特性。
selected	布尔值。表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
text	选项的文本。
value	选项的值。

当然，也可以使用DOM功能来访问这些信息，但是效率比较低，不建议使用。来看一个例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form method="post">
  <select name="location" id="selLocation">
     <option value="Sunnyvale, CA">Sunnyvale</option>
     <option value="Los Angeles, CA">Los Angeles</option>
     <option value="Mountain View, CA">Mountain View</option>
     <option value="">China</option>
     <option>Australia</option>
  </select>
<form>
<script type="text/javascript">
var selectbox=document.getElementById('selLocation');
alert(selectbox.options[0].value); //Sunnyvale, CA
alert(selectbox.options[0].text); //Sunnyvale

</script>
</body>
</html>

上面这段代码，获得了第一个选项的value值和text值。

选择选项

对于只允许选择一项的选择框，可以直接使用选择框的selectedIndex属性来访问选中项。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form method="post">
  <select name="location" id="selLocation">
     <option value="Sunnyvale, CA" >Sunnyvale</option>
     <option value="Los Angeles, CA">Los Angeles</option>
     <option value="Mountain View, CA">Mountain View</option>
     <option value="China" selected>China</option>
     <option>Australia</option>
  </select>
<form>
<script type="text/javascript">
var selectbox=document.getElementById('selLocation');

var selectedIndex=selectbox.selectedIndex;
var selectedOption=selectbox.options[selectedIndex];
alert('Selected index: '+selectedIndex+'\nSelected text: '+selectedOption.text+'\nSelected value: '+selectedOption.value);
/*
Selected index: 3
Selected text: China
Selected value: China
*/
</script>
</body>
</html>

对于可以选择多项的选择框，设置selectedIndex属性会导致取消以前所选所有选项并选择指定的那一项，而读取selectedIndex则只会返回选中项中的第一项的索引值，所以，这种选择框，不能用selectedIndex这种方法选择选项。这里，可以采用另一种方式来实现：

function getSelectedOption(selectbox){
   var result=new Array();
   var option=null;
   
   for(var i=0,len=selectbox.options.length; i<len; i++){
      option=selectbox.options[i];
	  if(option.selected){
	     result.push(option);
	  }
   }
   return result;
}

这个函数，将循环迭代所有选项，同时检测每一项的selected属性，如果选项有被选中，则将其添加到前面定义的result数组中，最后返回这个数组。

这种方法适用于单选或则多选选择框。

添加选项

添加选项的方法主要有以下三种。

第一种，使用DOM方法，像这样：

var newOption=document.createElement('option');
newOption.appendChild(document.createTextNode('Option text'));
newOption.setAttribute('value','Option value');
selectbox.appendChild(newOption);

第二种方法是使用Option构造函数来创建新选项。Option构造函数接收两个参数：文本（text）和值（value）。第二个参数可选。在这种情况下，仍然能够使用appendChild()将新选项添加到选择框中：

var newOption=new Option('Option text','Option value');
selectbox.appendChild(newOption); //在IE8及之前版本中有问题，不能正确设置新选项文本

上面这种方法在除IE的浏览器中都可以使用。

第三中添加新选项的方法就是使用选择框的add()方法。该方法接收两个参数：要添加的新选项和将位于新选项之后的选项。第二个参数是可选的，如果指定，该参数必须是新选项之后选项的索引。若要将新选项添加在末尾，则第二个参数设置为undefined。

var newOption=new Option('Option text','Option value');
selectbox.add(newOption,undefined); //最佳方案

移除选项

移除选项也有加个方法，下面分别介绍。

第一种，可以使用DOM的removeChild()方法，为其传人要移除的选项，如下面所示：

selectbox.removeChild(selectbox.option[0]); //移除第一个选项

第二种方法，可以使用选择框的remove()方法。这个方法接受一个参数，即要移除选项的索引，如下面所示：

selectbox.remove(0); //移除第一个选项

第三种方法，就是将相应选项设置为null，如下面所示：

selectbox.options[0]=null; //移除第一个选项