Javascript中的Form表单知识点统计

自身做php的,方今发现JS真的是无所不知啊,比PHP难.
在HTML中,表单是由form元向来代表的,可是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,由此与其余HTML元素具有同样的默认属性;HTMLFormElement有协调以下属性和措施;

acceptCharset:
服务器可以处理的字符集;等价于HTML中的accept-charset特性;
**action: **接受请求的URL,等价于HTML中的action
**elements: **表单中有着控件的集合.
enctype: 请求的编码类型;等价于HTML中的enctype特性;
**length: **表单中控件的数据;
method:
要发送的http请求类型,一般是get或者是post,等价于HTML中的method;
**name: **表单的名号;
**reset(): **将所有表单域重置为默许值;
submit(): 提交表单;
target:用来发送请求和吸收响应的窗口名称;
怎么样获取form表单的引用?
假使现在页面上有一个form表单元素,html代码如下:

<form id="form" name="form1"></form>```
我现在想取到上面的form表单的引用,一共有以下方式可以获取到上面 的form表单引用;
1. 通过获取form表单的id,来获取form表单的引用;如下代码:

var formId = document.getElementById(“form”);
console.log(formId);“`

  1. 透过document.forms
    取得页面中的所有表单元素,然后经过索引来取到对应的form元素,如下代码所示:取得页面第四个form元素;

console.log(document.forms[0]);```
3. 通过from表单中的name属性来获取,代码如下:

console.log(document.forms[‘form1’]);“`

什么提交表单
上面的具备事件都是源于上一篇博客javascript事件下结论的风浪,都信赖于此封装的轩然大波,代码如下:

var EventUtil = { 
  addHandler:function(element,type,handler) {
      if(element.addEventListener) { 
        element.addEventListener(type,handler,false);     
      }else if(element.attachEvent) {
        element.attachEvent("on"+type,handler); 
      }else { 
        element["on" +type] = handler; 
      }
   }, 
  removeHandler: function(element,type,handler){   
      if(element.removeEventListener) {
        element.removeEventListener(type,handler,false); 
      }else if(element.detachEvent) {  
        element.detachEvent("on"+type,handler); 
      }else { 
        element["on" +type] = null; 
      } 
    }, 
  getEvent: function(event) { 
      return event ? event : window.event; 
   }, 
  getTarget: function(event) { 
      return event.target || event.srcElement; 
   }, 
  preventDefault: function(event){ 
      if(event.preventDefault) { 
        vent.preventDefault(); 
      }else{ 
        event.returnValue = false; 
      } 
    }, 
   stopPropagation: function(event) { 
      if(event.stopPropagation) { 
        event.stopPropagation(); 
      }else { 
        event.cancelBubble = true; 
      }  
    }, 
    getRelatedTarget: function(event){ 
      if (event.relatedTarget){ 
        return event.relatedTarget; 
      } else if (event.toElement){ 
        return event.toElement; 
      } else if (event.fromElement){ 
        return event.fromElement; 
      } else { 
        return null; 
      }
    }, 
    getWheelDelta: function(event) { 
      if(event.wheelDelta) {
        return event.wheelDelta; 
      }else { 
        return -event.detail * 40 
      }
    }, 
    getCharCode: function(event) { 
      if(typeof event.charCode == 'number') { 
        return event.charCode; 
      }else { 
        return event.keyCode; 
      } 
    }
};```
用户单击提交按钮或图像按钮时,就会提交表单,使用input或者button都可以提交表单,只需将type设置为submit或者image即可,如下三种方式都可以;
第一种:

<form id=”form” name=”form1″ action=”http://www.baidu.com"&gt;

<input type=”text”>
<input type=”submit” value=”submit”>
</form>“`
第二种:

<form id="form" name="form1" action="http://www.baidu.com"> 
<!-- 存放一个input放在这,为了获取焦点,然后我们可以按enter键提交 --> 
<input type="text">
<button type="submit">submit</button>
</form>```
第三种:

<form id=”form” name=”form1″ action=”http://www.baidu.com"&gt;

<input type=”text”>
<input type=”image” src=”aa.jpg”>
</form>“`
咱俩也足以由此如下格局提交表单,可是也得以阻止form表单提交:如下代码:

EventUtil.addHandler(
    formId,"submit",function(event){ 
    // 取得事件对象 
    event = EventUtil.getEvent(event);
     // 阻止默认事件 EventUtil.preventDefault(event);
    }
);```
**如何重置表单**
如果我们使用按钮重置表单的话,有下面2种方式:
第一种代码如下:

<form id=”form” name=”form1″ action=”http://www.baidu.com"&gt;
<input type=”text”>
<input type=”reset” value=”reset”>
</form>

第二种代码如下:

<form id=”form” name=”form1″ action=”http://www.baidu.com"&gt;
<input type=”text”>
<button type=”reset”>reset</button>
</form>“`

大家也得以通过像提交form表单一样来开展重置表单,代码如下:

 var formId = document.getElementById("form");
formId.reset();

什么访问表单字段?
率先种办法大家可以动用dom节点来拜会;
其次种办法:每个表单都有elements属性,该属性是表单中享有表单元素的集结;这些elements是个静止列表;包罗着独具字段,比如有input,textarea,button,fieldset等;
例如如下HTML代码:

<form id="form" name="form1" action="http://www.baidu.com"> 
<input type="text" name="input1"> 
<select name="select1"> 
<option>111</option>
</select>
</form>

JS获取表单字段如下:

var formId = document.getElementById("form");
// 取得表单中的第一个字段
var firstCol = formId.elements[0];
console.log(firstCol);
// 取得名字name为select1的字段
console.log(formId.elements['select1']);
// 取得表单中包含字段的数量
console.log(formId.elements.length);

若果一个表单中,有八个name相同的性质,那么取得数据是一个聚集,如下HTML代码:

<form id="form" name="form1" action="http://www.baidu.com">
<input type="radio" name="radio2"/> 
<input type="radio" name="radio2"/> 
<input type="radio" name="radio2"/>
</form>```
JS代码如下:

var formId = document.getElementById(“form”);
var radios = formId.elements[“radio2”];
console.log(radios.length);
// 打印3“`
共有的表单字段属性
具备的表单字段都有一组一致的习性;表单共有的特性如下:
disabled: 布尔值,表示近期字段是不是被剥夺;
form: 指向当前字段所属表单的指针,只读;
name: 当前字段的名目;
readOnly:布尔值,表示近来字段是还是不是可读。
tabIndex: 表示近日字段的切换(tab)序号。
type: 当前字段的档次,如checkbox,radio等;
value: 当前字段被交付到服务器的值;
共有的表单字段方法
各种表单字段都有四个格局focus()和blur(),其中focus是取得关节;比如在页面加载成功后,我盼望form表单中的第二个字段获取关节(除隐藏域之外);如下代码:

<form id="form" name="form1" action="http://www.baidu.com"> 
<input type="text" name="radio2"/> 
<input type="text" name="radio2"/> 
<input type="text" name="radio2"/>
</form>```
JS代码如下:

var formId = document.getElementById(“form”);
EventUtil.addHandler(
window,’load’,function(event){
formId.elements[0].focus();
}
);“`
可是HTML5中为表单字段新增了一个autofocus特性,在支撑那一个特性浏览器中,即使设置了那一个特性,不用javascript就能将刀口移动到某个输入框下,比如如下HTML代码,在页面加载成功后,我把热点放在第四个输入框内,如下HTML代码:

<form id="form" name="form1" action="http://www.baidu.com"> 
<input type="text" name="radio2" /> 
<input type="text" name="radio2" autofocus/>
<input type="text" name="radio2"/>
</form>```
支持**autofocus**属性的浏览器有:firefox4+,safari5+,chrome和Opera9.6+
但是我想要兼容其他不支持autofocus的浏览器,我们可以写一段JS,为了全兼容;

var formId = document.getElementById(“form”);
EventUtil.addHandler(window,’load’,function(event){
var element = formId.elements[1];
if(element.autofocus !== true) {
element.focus();
}
}
);

因为``autofocus``是一个布尔值,支持他的浏览器默认为true;不支持他的浏览器,默认值为空字符串;
**共有的表单字段事件**
所有的表单字段都支持以下三个事件;
blur:当前字段失去焦点时触发;
change:对于input和textarea元素,值发生改变的时候触发;
focus: 当前字段获得焦点时触发;
**理解文本框脚本**
在HTML中,有2种方式来实现文本框,一种是input元素的单行文本框,另一种是textarea元素的多行文本框;
input元素有属性type=”text”, 还可以通过设置size属性,用来指定文本框显示的字符数,还可以设置value,用来显示文本框的初始值,还可以设置maxlength属性,用于指定文本框可以接受的最大字符数;如下代码:
``<input type="text" size="2" maxlength='12' value=""/>``
多行文本框textarea也有一些属性,这里就不做多介绍了;
**如何选择文本:**
input和select两种元素都支持select()方法,这个方法用于选择文本框中的所有文本,在调用select()方法中(除Opera外),都会将焦点设置到文本框中,这个方法不接受任何参数,如下代码:

<form id=”formId”>
<input type=”text” name=”input” value=”我是龙恩”/>
</form>“`
JS代码如下:

var formId = document.getElementById("formId");
formId.elements['input'].select();```
如下图所示:

![](http://upload-images.jianshu.io/upload_images/2229907-9e1305589205ab26.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如上是页面一进来的时候,默认选择input元素框所有的内容;我们也可以当获取焦点的时候,就选中所有的内容,JS代码可以改为如下:

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
EventUtil.addHandler(input,”focus”,
function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
}
);“`
在火狐和谷歌(Google)浏览器下能已毕当获得关节的时候,就当选input元素框内的持有情节,不过在IE7或者8下,如故页面加载完后就早已入选了文本框内的有着因素;
** 1.挑选事件(select)**
与select方法对应的,还有一个select事件,在IE9+,firefox,chrome,opera和safari中,唯有用户选用了文件且释放鼠标时,会触发select事件;但是在IE8及以下,只要用户选用了一个字母且不必释放鼠标,就会触发select事件;如下代码:

var formId = document.getElementById("formId"),
  input = formId.elements['input'];
  EventUtil.addHandler(
    input,"select",
    function(event){ 
        alert(input.value);
      }
  );```
**2. 取的选择的文本**
虽然通过select事件我们知道用户什么时候选择了文本,但是我们并不知道用户选择了什么文本,在HTML5中,我们通过两个属性selectionStart和selectionEnd,这两个属性表示选择的范围(即文本区开头和结尾的偏移量);因此要取得用户选择的文本,可以使用如下代码;

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
EventUtil.addHandler(input,”select”,
function(event){
alert(getSelectedText(input));
}
);
function getSelectedText(elem) {
return elem.value.substring(
elem.selectionStart,elem.selectionEnd
);
}“`
但是近来浏览器匡助程度有:IE9+,firefox,chrome,Opera及safari;
IE8及前边的本子不接济那多个特性,不过他们提供了此外一种document.selection对象,其中保存着用户在全体文档范围内选择的文件音信,不过呢与前方的select事件选择在一道的话,只可以选取一个字符就会触发事件,也就是说,不可以拔取大于1和字符的文字,可是可以领悟选拔的值时不怎么;如下代码:

var formId = document.getElementById("formId"),
  input = formId.elements['input'];
    EventUtil.addHandler(input,"select",
      function(event){ 
        alert(getSelectedText(input));
      }
    );
    function getSelectedText(elem) { 
      if(typeof elem.selectionStart == "number") {
        return elem.value.substring(
          elem.selectionStart,elem.selectionEnd
        ); 
      }else if(document.selection) { 
        return document.selection.createRange().text; 
      }
    }```
**选择部分文本**
HTML5也为选择文本框中的部分文本提供了解决方案,使用setSelectionRange()方法,这个方法接收2个参数,要选择的第一个字符的索引,和要选择的最后一个字符之后的字符的索引;
浏览器支持有:IE9+,chrome,safari和opera,**firefox****貌似不支持;**
代码如下:

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
input.value = “我是龙恩,我是中国人”;
// 接纳具有文件
input.setSelectionRange(0,input.value.length);“`
截图如下:

// 选择前3个字符

input.setSelectionRange(0,3);```
截图如下:
![](http://upload-images.jianshu.io/upload_images/2229907-0a16e967ca7bebc9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

// 选择第四到第六个字符
``input.setSelectionRange(4,7);``
截图如下:
![](http://upload-images.jianshu.io/upload_images/2229907-75d9b8e65566e4e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

IE8及以下版本可以使用范围来选择部分文本,要选择部分文本,必须首先使用IE在所有文本框中提供的``createTextRange()``方法创建一个范围,且我们需要使用collapse()将范围折叠到文本框的开始位置,再使用``moveStart()``和``moveEnd()``这两个范围方法将范围移动到位;
如下代码选择所有的文本:

input.value = “我是龙恩,我是中国人”;
var range = input.createTextRange();
// 选择具有文件
range.collapse(true);
range.moveStart(“character”,0);
range.moveEnd(“character”,input.value.length);
range.select();“`
以身作则如下:

切记:行使F5刷新没有用的,要在地方栏中,然后按enter键刷新即可看到成效;

// 选择前3个字符
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);
range.select();```
演示如下:
![](http://upload-images.jianshu.io/upload_images/2229907-e7e5a303b3471421.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
// 选择第4到第6个字符
```range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);
range.select();```

演示如下:
![](http://upload-images.jianshu.io/upload_images/2229907-365912c2c37f7da1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为了让跨浏览器效果,我们可以封装一个方法,如下:

function selectText(elem,startIndex,stopIndex) {
if(elem.setSelectionRange) {
elem.setSelectionRange(startIndex,stopIndex);
}else if(elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveStart(“character”,startIndex);
range.moveEnd(“character”,stopIndex-startIndex);
range.select();
}
}“`
测试数据如下:貌似****firefox****不支持

// 选择所有文本
selectText(input,0,input.value.length); 
// 选择前3个字符
selectText(input,0,3);
// 选择第四个字符到第六个字符
selectText(input,4,7);

过滤输入
**
突发性我们会须求用户在输入框里面输入特定格式的数码,大家就足以选择过滤输入那种手法来进展了,首先大家来探望怎么样屏蔽字符;
** 1. 屏蔽字符

比如自己在一个input输入框中,只允许只好输入数字,那么我们得以先拿走通过keypress事件来监听,然后每一遍获得到键码,然后通过String.fromCharCode()其一措施,把键码转换成字符串,然后通过正则判断下,若是还是不是数字,直接堵住默许事件即可不让用户输入,如下代码:

<form id="formId"> 
  <input type="text" name="input"/>
</form>```
JS代码如下:

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
EventUtil.addHandler(input,’keypress’,
function(event) {
event = EventUtil.getEvent(event);
var charCode = EventUtil.getCharCode(event);
if(!/\d/.test(String.fromCharCode(charCode))) {
EventUtil.preventDefault(event);
}
}
); “`
如上代码能满意普通需要,不过多少游览器,比如firefox,safari(3.1本子此前)会对向上键,向下键,退格键和删除键也会触发keypress事件了;所以为了幸免那么些事件的暴发,大家要求做一些甩卖来知足所有版本的浏览器的要求,大家发现在firefox中,所有由非字符键触发keypress键码都为0;而在safari3之前的本子中,对应的字符编码全体为8;所以大家要对字符编码进行判定下;
如下代码:

EventUtil.addHandler(input,'keypress',
  function(event) { 
    event = EventUtil.getEvent(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) { 
      EventUtil.preventDefault(event); 
    }
  }
);```
**操作剪贴板**
到目前为止,IE,chrome,safari,opera都支持剪贴板事件,貌似firefox就不支持了(书上说支持);但是我操作就不支持了;下面是6个操作剪贴板事件;如下:
beforecopy: 在发生复制操作前触发;
copy: 在发生复制操作时触发;
beforecut: 在发生剪贴操作前触发;
cut: 在发生剪贴操作时触发;
beforepaste: 在发生黏贴操作前触发;
paste: 在发生粘帖操作时触发;
针对上面的事件,我们可以使用如下代码测试下就可以证明了;代码如下所示:

EventUtil.addHandler(input,’beforecopy’,
function(event) {
alert(1);
}
);“`
借使要访问剪贴板中的数据,可以采用clipboardData对象,在IE中,那一个目的是window对象的特性,在safari或者chrome上,那一个目的是event的属性,这一个clipboardData对象有三个办法,getData(),setData(),和clearData();
getData()是从剪贴板中得到数据,他接受一个参数,即要取得数据的格式,在IE中,有三种数额格式”text”

“url”,在safari和chrome中这一个参数是一种MIME类型,但是,可以运用text代表text/plain.
setData()方法是给剪贴板设置文本,接受2个参数,首个数据是数据类型;第四个参数是坐落剪贴板中的文本;可是此方法接受的数据类型只好是text/plain,不可能是text;因而为了全包容浏览器(出firefox外),大家可以写一个通用的措施出来,如下:

getClipboardText: function(event) { 
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text"); 
},setClipboardText:function(event,value) {
  if(event.clipboardData) {
    return event.clipboardData.setData("text/plain",value); 
  }else if(window.clipboardData) { 
    return window.clipboardData.setData("text",value); 
  }
}```
因此EventUtil封装的所有方法如下:

var EventUtil = {
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent(“on”+type,handler);
}else {
element[“on” +type] = handler;
}
},
removeHandler: function(element,type,handler){
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent) {
element.detachEvent(“on”+type,handler);
}else {
element[“on” +type] = null;
}
},
getEvent: function(event) {
return event ? event : window.event;
}, getTarget: function(event) {
return event.target || event.srcElement;
}, preventDefault: function(event){
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}, stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}, getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
}, getWheelDelta: function(event) {
if(event.wheelDelta) {
return event.wheelDelta;
}else {
return -event.detail * 40
}
}, getCharCode: function(event) {
if(typeof event.charCode == ‘number’) {
return event.charCode;
}else {
return event.keyCode;
}
}, getClipboardText: function(event) {
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData(“text”);
}, setClipboardText:function(event,value) {
if(event.clipboardData) {
return event.clipboardData.setData(“text/plain”,value);
}else if(window.clipboardData) {
return window.clipboardData.setData(“text”,value);
}
}
};“`
测试代码如下:依然地点测试输入框的值是不是为数字;每回粘帖上次,都能赢得到黏贴的是文字数据,代码如下:
HTML代码如下:

<form id="formId">
<input type="text" name="input"/>
</form>```
JS代码如下:

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
EventUtil.addHandler(input,’paste’,function(event){
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardText(event);
alert(text);
if (!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
});“`
接头自动切换输入框或者****textarea****的焦点
譬如大家在填充表单的页面上,当用户输入完自己的数量的时候,不需求用户手动切换到下一个输入框里面去,大家可以自动切换去,那样的话,对于用户体验来说,比较有利,比如大家现在页面上有一个form表单,那里为了做测试,大家先用一个输入框用于手机号码的,其它一个是textarea,当手机号码输入11位数字后,会自行切换来textarea中;当然页面中的隐藏域除外;代码如下:
HTML代码如下:

<form id="formId"> 
<input type="text" name="input" maxlength=11/> 
<textarea></textarea>
</form>```
JS代码如下:

var formId = document.getElementById(“formId”),
input = formId.elements[‘input’];
EventUtil.addHandler(input,’keyup’,tabForward);
function tabForward(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength) {
// 获取当前的form表单的引用
var form = target.form;
for(var i=0,ilen=form.elements.length; i<ilen; i++){
if(form.elements[i] == target) {
if(form.elements[i+1]) {
form.elements[i+1].focus();
}
return;
}
}
}
}“`
明亮HTML5新增属性
required属性;
比如说在HTML5中对表单input,textarea,或者select标签的话,提交表单时,必要看清是不是为空,更加对于在做运动端的朋友来说,可以行使HTML5中的新增属性required;如下HTML代码:

<form id="formId"> 
<input type="text" name="input" maxlength=11 required/> 
<textarea></textarea> 
<input type="submit"/>
</form>```
提交时候,在chrome下看到效果如下:
![](http://upload-images.jianshu.io/upload_images/2229907-3cb4f0f786a55c25.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在firefox下,提示如下:
![](http://upload-images.jianshu.io/upload_images/2229907-538edd2d37fd4a6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如上是根据不同的浏览器本身的性质来提示的,因此样式不同,所以适合在移动端根据本身浏览器内核来提示;
但是在Javascript是如何判断的呢?比如如下HTML代码:

<form id=”formId”>
<input type=”text” name=”input” maxlength=11 required/>
<textarea></textarea>
<input type=”submit” name=”submit”/>
</form>“`
JS代码如下:

var formId = document.getElementById("formId"),
  submit = formId.elements['submit'];
  EventUtil.addHandler(submit,'click',function(event){ 
    var isRequired = formId.elements["submit"].required;
    console.log(isRequired);
  });```
如上打印出false;可以获取到submit的属性required,如果输入框值为空的话,会打印出false出来;
如果想知道浏览器是否支持required这个属性的话,我们可以使用如下代码判断下,如果返回true,说明支持,否则不支持;如下:

var isRequiredSupported = “required” in
document.createElement(“input”);
console.log(isRequiredSupported);“`
input输入框类型type的值是email或者url
<input type=”email” name=”email”/>
<input type=”url” name=”url”/>
email类型须求输入的文书必须符合电子邮件的格式,url类型必要输入的文本必须符合URL的格式;如下chrome浏览器截图如下;

选用框脚本
慎选框是通过<select>和<option>元素成立的,除了表单所有的共有属性和方法外,HTMLSelectElement类还提供了下列属性和办法;
add(newOption,relOption);向控件中插入新<option>元素,其岗位在relOption此前;
multiple:布尔值;
表示是还是不是同意多项选拔,等价于HTML中的multiple特性;
**options: **控件中持有<option>元素的HTMLCollection;
**remove(index): **移除给定地方的选项;
**selectedIndex: **基于0的入选索引,假如没有该选项,则值为 -1;
**size: **接纳框中的可知的行数。
如下select框代码:

<form id="formId"> 
  <select name="location" id="selLocation"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="">D</option> 
    <option>E</option> 
  </select>
</form>

JS代码如下:

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
  console.log(select.value);
  EventUtil.addHandler(select,'change',function(){ 
    console.log(select.value)
  });```
第一次页面加载完成后,打印出值为A;
当每次切换的时候,如果有value就打印出值,如果value=””;则打印空字符串,但是如果option选项没有指定value,在firfox和chrome下打印出当前的文本值,比如上面的文本为E,则值为E;但是IE8及以下,打印的还是空字符串;
在DOM中,每个<option>元素都有一个HTMLOptionElement对象表示;为方便访问数据,对象添加了如下属性;
**index:**当前选项在options集合中的索引;
**label:**当前选项的标签,等价于HTML中的label
**selected:**布尔值,表示当前选项是否被选中,将这个属性设置为true可以选中当前选项。
**text:**选项的文本;
**value:**选项的值;
我们还是以上面的form表单作为HTML代码,我们使用JS来测试下:
如下代码:

var formId = document.getElementById(“formId”),
select = formId.elements[‘location’];
// 获取options集合中的第一项选项的文本
console.log(select.options[0].text);
// 打印出A// 获取options集合中的第一项选项的value
console.log(select.options[0].value);
// 打印出A

对于下拉框只能选择一项的选择框,访问最简单的方式,就是使用selectedIndex属性,如下HTML代码:

<form id=”formId”>
<select name=”location” id=”selLocation”>
<option value=”A”>A</option>
<option value=”B” selected>B</option>
<option value=”C”>C</option>
<option value=””>D</option>
<option>E</option>
</select>
</form>“`
假若页面开始化的时候默许选项第二项,那么大家可以先接纳selectedIndex的属性获取选中的目录,然后根据目录获取当前的文书和值;如下JS代码:

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
  // 获取当前选中的选项的索引selectedIndex
var selectedIndex = select.selectedIndex;
  // 获取索引为selectedIndex的option
var selectedOption = select.options[selectedIndex];
console.log("selected index:"+selectedIndex+"\nselect text:"+selectedOption.text+"\nselect value:"+selectedOption.value);```
**添加选项**
可以使用javascript动态创建选项,并将它们添加到选择框中,添加选择框有以下常见3种方式;
第一种方式使用DOM的方式如下:
HTML代码如下:

<form id=”formId”>
<select name=”location” id=”selLocation”></select>
</form>“`
JS代码如下:

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("A"));
newOption.setAttribute("value","AAAA");
select.appendChild(newOption);```
第二种方式使用Option构造函数来创建新选项,Option构造函数接收2个参数,文本(text)和值(value),第二个参数可选,比如如下代码:

var formId = document.getElementById(“formId”),
select = formId.elements[‘location’];
var newOption = new Option(“Option text”,”Option value”);
select.appendChild(newOption);“`

只是那种方法在IE下是不奏效的;
上面大家来探视第二种艺术啊!是使用选择框add()方法,DOM规定这一个主意接收2个参数,要增长的新拔取和将放在新拔取之后的选项,若是想在列表的终极添加一个选项,应将第四个参数设置为null;在IE对add()方法的兑现中,第三个参数是可选的,可是正式DOM浏览器中,必要求指定第三个参数,因而为了全兼容浏览器,我们务必添加第三个参数,但是大家可以将第一个参数设置为undefined,含义是:在颇具的浏览器将新选取插入到列表的末尾了~
如下代码:

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
var newOption = new Option("Option text","Option value");
select.add(newOption,undefined);```
**移除选项的方式如下:**
1. 使用dom的removeChild()方法,为其传入要移除的选项;如下代码:
HTML代码如下:

<form id=”formId”>
<select name=”location” id=”selLocation”>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”C”>C</option>
</select>
</form>

Javascript代码如下:

var formId = document.getElementById(“formId”),
select = formId.elements[‘location’];
// 第一种:移除第一项如下形式
select.removeChild(select.options[0]);“`

  1. 第三种方法是使用拔取框的remove()方法,这一个法子接收一个参数,既要移除选项的目录;如下代码:

var formId = document.getElementById("formId"),select = formId.elements['location'];// 移除第一项select.remove(0);```

3. 最后一种方式,就是将相应的选项设置为null,如下代码:

var formId = document.getElementById(“formId”),
select = formId.elements[‘location’];
// 移除第一项
select.options[0] = null;“`

领悟表单体系化
在javascript中,可以应用表单字段的type属性,连同name和value属性一起已毕对表单的体系化,种类化后将把那几个多少发送给服务器。
下边是将那一个字段需求开展种类化的;

1.对表单字段的名目和值进行URL编码,使用&分割;
2.不发送禁用的表单字段;
3.只发送勾选的单选框和复选框按钮数据;
4.不发送type为reset和button的按钮
5.多选选取框中的每个选中的值单独一个条目;
6.Select元素的值,就是选中option元素的value的值,假诺option没有质量value,则是选中的文本值;

正如JS代码是封装form表单的体系化的JS如下:
// 系列化JS代码封装

function serialize(form) { 
  var arrs = [], field = null, i, len, j, optLen, option, optValue;
  for(i = 0,len = form.elements.length; i < len; i++) {
    field = form.elements[i]; 
    switch(field.type) { 
      case "select-one": case "select-multiple":   
        if(field.name.length) { 
          for(j = 0,optLen = field.options.length; j < optLen; j++) {
            option = field.options[j]; 
            if(option.selected) { 
              optValue = ''; 
              if(option.hasAttribute) { 
                optValue = option.hasAttribute("value") ? option.value : option.text; 
              }else { 
                optValue = option.attributes["value"].specified ? option.value : option.text; 
              }
            arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));
            } 
          } 
        } 
        break; 
        case undefined: 
        //字段集 
        case "file": 
        // 文件输入 
        case "submit": 
        // 提交按钮 
        case "reset": 
        // 重置按钮 
        case "button": 
        // 自定义按钮 
        break;
        case "radio": 
        // 单选框 
        case "checkbox": 
        // 复选框 
          if(!field.checked) { 
            break; 
          } 
      /* 执行默认动作 */
        default: 
      // 不包含没有名字的表单字段 
          if(field.name.length) {
            arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value)); 
          } 
        } 
      } 
    return arrs.join("&");
  }```
如上对form表单序列化的函数serialize,定义了一个arrs数组,用来保存需要序列化后的名值对,然后通过for循环迭代每个表单中的字段,先使用临时变量field保存表单中任意一个字段的引用,然后使用switch语句判断字段的类型type(如果type未定义的话,此元素就不需要表单序列化),第一种情况是select的单选和多选框,对于select单选框,只可能有一个选中项,对于多选框可能有零或多个选中项,如果有选中项的话(通过属性selected来判断),需要确定使用什么值,如果不存在value特性,或者虽然存在该特性,但是值为空字符串,都是使用选项的文本来代替,为检查这个特性,在兼容DOM的浏览器下我们需要使用hasAttribute()方法,而在IE中需要使用特性的specified属性;对于type=“file”或者submit,reset,button等就不支持,如果比如上传图片的时候,需要图片的二进制数据使用form表单提交的话,可以在序列化后在加上这个参数即可;对于单选框和复选框如果没有选中的话,同样不进行序列化;下面我们现在来看看一个demo吧!如下HTML代码:

<form id=”formId”>
<select name=”location” id=”selLocation” one=”one”>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”C”>C</option>
</select>
<select multiple=”multiple” style=”width: 50px;” id=”mymultiple”
name=”select2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input name=”a” type=”radio”/>
<input name=”b” type=”checkbox”/>
<input type=”file” name=”aaaa”>
<input type=”hidden” name=”hidden” value=”hidden”/>
<input type=”submit” value=”提交” name=”submit”/>
</form>“`
JS代码如下:

var formId = document.getElementById("formId");
console.log(serialize(formId));
var submit = formId.elements['submit'];
EventUtil.addHandler(submit,'click',function(e){
    EventUtil.preventDefault(e);
    console.log(serialize(formId));
});```
我们看到上面的form表单代码,上面有select单选框,也有select多选框,也有隐藏域和input框,**但是请注意:**上面name=”a”和name=”b”,当他们选中的时候,没有值属性,所以在各个浏览器上都会自带一个值为on的值传给服务器端,但是这个并不是我们想要的,所以的如果需要值的话,一定要设置值,如下如下截图:
在火狐和谷歌下截图如下:
![](http://upload-images.jianshu.io/upload_images/2229907-79e597865f688c68.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在IE下:
![](http://upload-images.jianshu.io/upload_images/2229907-cf4c14a9c8e6edbd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上面的select多选框,如果需要多选的话,记得先要按住键盘上的ctrl键就可以多选了,比如上面的select2=2&select2=3&select2=4 就是select框多选。
**理解富文本编辑**
在网页中编辑内容,IE最早引入这个功能,随后opera,safari,firefox和chrome也实现了这个功能,基本原理就是在页面中嵌入一个空HTML页面的iframe,通过设置designMode属性,这个空白的HTML页面可以添加文字,而添加文字则是该页面的body元素的html代码,如下所示:
![](http://upload-images.jianshu.io/upload_images/2229907-753e2f8d4d74439a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
designMode有2个属性,off(默认值)和on, 当设置为on的时候,整个文档变得可编辑,但是我们也可以给他们添加css样式,为了更加美观;首先我们先来看看demo,如下HTML页面嵌套一个iframe;
<iframe name="richedit" src="bank.html"></iframe>
而bank.html页面是一个空页面,代码如下:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”Generator” content=”EditPlus®”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<title>Document</title>
</head>
<body> “`
然后在主页面上应用JS,当页面加载成功后,将designMode属性设置为on即可,如下JS代码:

EventUtil.addHandler(window,'load',function(event){ 
  frames['richedit'].document.designMode = "on";
});

下一场在页面上显示如下:

第二种完毕形式是应用contenteditable属性来贯彻
contenteditable属性是有IE最早落到实处的,可以把contenteditable属性给页面中的任何因素,然后用户可以立时编辑该因素,不须求iframe,空页面及JS,只需求动用contenteditable属性即可;如下代码给div设置contenteditable属性;如下代码:

<div class="richedit" contenteditable style="width:100px;height:100px;border:1px solid #ccc">
</div>```
在浏览器下效果如下:
![](http://upload-images.jianshu.io/upload_images/2229907-dcd9a1fcdd491533.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
支持的浏览器有;IE,firefox,chrome,safari和opera;
在移动设备上,有ios5+和Android3+;
Contenteditable属性有三个可能值,true表示打开,false表示关闭,inherit表示从父元素那边继承。
[转载自:空智的博客](http://www.cnblogs.com/tugenhua0707/p/4508986.html)

相关文章