Javascript中的Form表單知識(shí)點(diǎn)總結(jié)

本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.
在HTML中粱锐，表單是由form元素來表示的，但是在javascript中扛邑，表單則由HTMLFormElement類型怜浅，此元素繼承了HTMLElement，因此與其他HTML元素具有相同的默認(rèn)屬性蔬崩；HTMLFormElement有自己以下屬性和方法恶座；

acceptCharset: 服務(wù)器能夠處理的字符集；等價(jià)于HTML中的accept-charset特性沥阳；
**action: **接收請(qǐng)求的URL跨琳，等價(jià)于HTML中的action
**elements: **表單中所有控件的集合.
enctype: 請(qǐng)求的編碼類型；等價(jià)于HTML中的enctype特性沪袭；
**length: **表單中控件的數(shù)量湾宙；
method： 要發(fā)送的http請(qǐng)求類型，一般是get或者是post冈绊，等價(jià)于HTML中的method侠鳄；
**name: **表單的名稱；
**reset(): **將所有表單域重置為默認(rèn)值死宣；
submit(): 提交表單伟恶；
target:用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱；
如何獲取form表單的引用毅该？
假如現(xiàn)在頁面上有一個(gè)form表單元素博秫，html代碼如下：

<form id="form" name="form1"></form>```
我現(xiàn)在想取到上面的form表單的引用，一共有以下方式可以獲取到上面 的form表單引用眶掌；
1. 通過獲取form表單的id挡育，來獲取form表單的引用；如下代碼：

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

  1. 通過document.forms 取得頁面中的所有表單元素朴爬，然后通過索引來取到對(duì)應(yīng)的form元素即寒，如下代碼所示：取得頁面第一個(gè)form元素；
console.log(document.forms[0]);```
3. 通過from表單中的name屬性來獲取，代碼如下：

console.log(document.forms['form1']);```

如何提交表單
下面的所有事件都是來自上一篇博客javascript事件總結(jié)的事件母赵，都依賴于此封裝的事件逸爵，代碼如下：

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; 
      } 
    }
};```
用戶單擊提交按鈕或圖像按鈕時(shí)，就會(huì)提交表單凹嘲，使用input或者button都可以提交表單师倔，只需將type設(shè)置為submit或者image即可，如下三種方式都可以周蹭；
第一種：

<form id="form" name="form1" action="http://www.baidu.com">

<input type="text">
<input type="submit" value="submit">
</form>```
第二種：

<form id="form" name="form1" action="http://www.baidu.com"> 
<!-- 存放一個(gè)input放在這趋艘，為了獲取焦點(diǎn)，然后我們可以按enter鍵提交 --> 
<input type="text">
<button type="submit">submit</button>
</form>```
第三種:

<form id="form" name="form1" action="http://www.baidu.com">

<input type="text">
<input type="image" src="aa.jpg">
</form>```
我們也可以通過如下方式提交表單谷醉，但是也可以阻止form表單提交：如下代碼：

EventUtil.addHandler(
    formId,"submit",function(event){ 
    // 取得事件對(duì)象 
    event = EventUtil.getEvent(event);
     // 阻止默認(rèn)事件 EventUtil.preventDefault(event);
    }
);```
**如何重置表單**
如果我們使用按鈕重置表單的話致稀，有下面2種方式：
第一種代碼如下：

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

第二種代碼如下：

<form id="form" name="form1" action="http://www.baidu.com">
<input type="text">
<button type="reset">reset</button>
</form>```

我們也可以通過像提交form表單一樣來進(jìn)行重置表單冈闭，代碼如下：

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

如何訪問表單字段俱尼？
第一種方式我們可以使用dom節(jié)點(diǎn)來訪問；
第二種方式：每個(gè)表單都有elements屬性萎攒，該屬性是表單中所有表單元素的集合遇八；這個(gè)elements是個(gè)有序列表；包含著所有字段耍休，比如有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");
// 取得表單中的第一個(gè)字段
var firstCol = formId.elements[0];
console.log(firstCol);
// 取得名字name為select1的字段
console.log(formId.elements['select1']);
// 取得表單中包含字段的數(shù)量
console.log(formId.elements.length);

如果一個(gè)表單中，有多個(gè)name相同的屬性羊精，那么取得數(shù)據(jù)是一個(gè)集合斯够，如下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: 布爾值喧锦，表示當(dāng)前字段是否被禁用读规；
form: 指向當(dāng)前字段所屬表單的指針，只讀燃少；
name: 當(dāng)前字段的名稱;
readOnly:布爾值束亏，表示當(dāng)前字段是否可讀。
tabIndex: 表示當(dāng)前字段的切換(tab)序號(hào)阵具。
type: 當(dāng)前字段的類型碍遍，如checkbox,radio等；
value: 當(dāng)前字段被提交到服務(wù)器的值阳液；
共有的表單字段方法
每個(gè)表單字段都有兩個(gè)方法focus()和blur()怕敬，其中focus是獲取焦點(diǎn)料祠；比如在頁面加載完成后丑瞧，我希望form表單中的第一個(gè)字段獲取焦點(diǎn)（除隱藏域之外）墓卦；如下代碼：

<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中為表單字段新增了一個(gè)autofocus屬性步清，在支持這個(gè)屬性瀏覽器中馆类，如果設(shè)置了這個(gè)屬性，不用javascript就能將焦點(diǎn)移動(dòng)到某個(gè)輸入框下壹店，比如如下HTML代碼诺舔，在頁面加載完成后，我把焦點(diǎn)放在第二個(gè)輸入框內(nèi)卤唉，如下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();
}
}
);

因?yàn)閌`autofocus``是一個(gè)布爾值熬的，支持他的瀏覽器默認(rèn)為true痊硕；不支持他的瀏覽器，默認(rèn)值為空字符串押框；
**共有的表單字段事件**
所有的表單字段都支持以下三個(gè)事件岔绸；
blur:當(dāng)前字段失去焦點(diǎn)時(shí)觸發(fā)；
change:對(duì)于input和textarea元素橡伞，值發(fā)生改變的時(shí)候觸發(fā)盒揉；
focus: 當(dāng)前字段獲得焦點(diǎn)時(shí)觸發(fā)；
**理解文本框腳本**
在HTML中兑徘，有2種方式來實(shí)現(xiàn)文本框刚盈，一種是input元素的單行文本框，另一種是textarea元素的多行文本框挂脑；
input元素有屬性type=”text”, 還可以通過設(shè)置size屬性藕漱，用來指定文本框顯示的字符數(shù)，還可以設(shè)置value崭闲，用來顯示文本框的初始值肋联，還可以設(shè)置maxlength屬性，用于指定文本框可以接受的最大字符數(shù)镀脂；如下代碼：
``<input type="text" size="2" maxlength='12' value=""/>``
多行文本框textarea也有一些屬性牺蹄，這里就不做多介紹了；
**如何選擇文本：**
input和select兩種元素都支持select()方法薄翅，這個(gè)方法用于選擇文本框中的所有文本沙兰，在調(diào)用select()方法中(除Opera外),都會(huì)將焦點(diǎn)設(shè)置到文本框中，這個(gè)方法不接受任何參數(shù)翘魄，如下代碼：

<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)
如上是頁面一進(jìn)來的時(shí)候鼎天，默認(rèn)選擇input元素框所有的內(nèi)容；我們也可以當(dāng)獲取焦點(diǎn)的時(shí)候暑竟，就選中所有的內(nèi)容斋射，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();
}
);```
在火狐和谷歌瀏覽器下能實(shí)現(xiàn)當(dāng)獲取焦點(diǎn)的時(shí)候育勺，就選中input元素框內(nèi)的所有內(nèi)容，但是在IE7或者8下罗岖，還是頁面加載完后就已經(jīng)選中了文本框內(nèi)的所有元素涧至；
** 1.選擇事件(select)**
與select方法對(duì)應(yīng)的，還有一個(gè)select事件桑包，在IE9+南蓬，firefox，chrome哑了，opera和safari中赘方，只有用戶選擇了文本且釋放鼠標(biāo)時(shí)，會(huì)觸發(fā)select事件弱左；但是在IE8及以下窄陡，只要用戶選擇了一個(gè)字母且不必釋放鼠標(biāo)，就會(huì)觸發(fā)select事件拆火；如下代碼：

var formId = document.getElementById("formId"),
  input = formId.elements['input'];
  EventUtil.addHandler(
    input,"select",
    function(event){ 
        alert(input.value);
      }
  );```
**2. 取的選擇的文本**
雖然通過select事件我們知道用戶什么時(shí)候選擇了文本跳夭，但是我們并不知道用戶選擇了什么文本，在HTML5中榜掌，我們通過兩個(gè)屬性selectionStart和selectionEnd优妙，這兩個(gè)屬性表示選擇的范圍(即文本區(qū)開頭和結(jié)尾的偏移量)；因此要取得用戶選擇的文本憎账，可以使用如下代碼；

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及之前的版本不支持這兩個(gè)屬性反砌，但是他們提供了另外一種document.selection對(duì)象，其中保存著用戶在整個(gè)文檔范圍內(nèi)選擇的文本信息萌朱，但是呢與前面的select事件使用在一起的話宴树，只能選擇一個(gè)字符就會(huì)觸發(fā)事件，也就是說晶疼，不能選擇大于1和字符的文字酒贬，不過可以知道選擇的值時(shí)多少；如下代碼：

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()方法锭吨，這個(gè)方法接收2個(gè)參數(shù)，要選擇的第一個(gè)字符的索引寒匙，和要選擇的最后一個(gè)字符之后的字符的索引零如；
瀏覽器支持有：IE9+，chrome，safari和opera考蕾，**firefox****貌似不支持祸憋；**
代碼如下：

var formId = document.getElementById("formId"),
input = formId.elements['input'];
input.value = "我是龍恩，我是中國人";
// 選擇所有文本
input.setSelectionRange(0,input.value.length);```
截圖如下：



// 選擇前3個(gè)字符

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

// 選擇第四到第六個(gè)字符
``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()``方法創(chuàng)建一個(gè)范圍，且我們需要使用collapse()將范圍折疊到文本框的開始位置喜命，再使用``moveStart()``和``moveEnd()``這兩個(gè)范圍方法將范圍移動(dòng)到位沟沙；
如下代碼選擇所有的文本：

input.value = "我是龍恩，我是中國人";
var range = input.createTextRange();
// 選擇所有文本
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",input.value.length);
range.select();```
演示如下：


切記：使用F5刷新沒有用的壁榕，要在地址欄中矛紫，然后按enter鍵刷新即可看到效果；

// 選擇前3個(gè)字符
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個(gè)字符
```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)
為了讓跨瀏覽器效果牌里，我們可以封裝一個(gè)方法颊咬，如下：

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();
}
}```
測試數(shù)據(jù)如下：貌似****firefox****不支持

// 選擇所有文本
selectText(input,0,input.value.length); 
// 選擇前3個(gè)字符
selectText(input,0,3);
// 選擇第四個(gè)字符到第六個(gè)字符
selectText(input,4,7);

過濾輸入
** 有時(shí)候我們會(huì)要求用戶在輸入框里面輸入特定格式的數(shù)據(jù)，我們就可以使用過濾輸入這種手段來進(jìn)行了牡辽，首先我們來看看如何屏蔽字符喳篇；
** 1. 屏蔽字符
比如我在一個(gè)input輸入框中，只允許只能輸入數(shù)字态辛，那么我們可以先獲取通過keypress事件來監(jiān)聽麸澜，然后每次獲取到鍵碼，然后通過String.fromCharCode()這個(gè)方法奏黑，把鍵碼轉(zhuǎn)換成字符串炊邦，然后通過正則判斷下，如果不是數(shù)字熟史，直接阻止默認(rèn)事件即可不讓用戶輸入馁害，如下代碼：

<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版本之前)會(huì)對(duì)向上鍵，向下鍵限寞，退格鍵和刪除鍵也會(huì)觸發(fā)keypress事件了忍啸；所以為了避免這些事件的發(fā)生，我們需要做一些處理來滿足所有版本的瀏覽器的需求昆烁，我們發(fā)現(xiàn)在firefox中吊骤，所有由非字符鍵觸發(fā)keypress鍵碼都為0；而在safari3以前的版本中静尼，對(duì)應(yīng)的字符編碼全部為8白粉；所以我們要對(duì)字符編碼進(jìn)行判斷下传泊；
如下代碼：

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個(gè)操作剪貼板事件恬口；如下：
beforecopy: 在發(fā)生復(fù)制操作前觸發(fā)校读；
copy: 在發(fā)生復(fù)制操作時(shí)觸發(fā)；
beforecut: 在發(fā)生剪貼操作前觸發(fā)祖能；
cut: 在發(fā)生剪貼操作時(shí)觸發(fā)歉秫；
beforepaste: 在發(fā)生黏貼操作前觸發(fā)；
paste: 在發(fā)生粘帖操作時(shí)觸發(fā)养铸；
針對(duì)上面的事件雁芙，我們可以使用如下代碼測試下就可以證明了；代碼如下所示：

EventUtil.addHandler(input,'beforecopy',
function(event) {
alert(1);
}
);```
如果要訪問剪貼板中的數(shù)據(jù)钞螟，可以使用clipboardData對(duì)象兔甘，在IE中，這個(gè)對(duì)象是window對(duì)象的屬性鳞滨，在safari或者chrome上洞焙，這個(gè)對(duì)象是event的屬性，這個(gè)clipboardData對(duì)象有三個(gè)方法太援，getData(),setData(),和clearData();
getData()是從剪貼板中取得數(shù)據(jù)闽晦，他接受一個(gè)參數(shù)，即要取得數(shù)據(jù)的格式提岔，在IE中，有二種數(shù)據(jù)格式”text” 和 “url”笋敞，在safari和chrome中這個(gè)參數(shù)是一種MIME類型碱蒙，不過，可以使用text代表text/plain.
setData()方法是給剪貼板設(shè)置文本夯巷，接受2個(gè)參數(shù)赛惩，第一個(gè)數(shù)據(jù)是數(shù)據(jù)類型；第二個(gè)參數(shù)是放在剪貼板中的文本趁餐；但是此方法接受的數(shù)據(jù)類型只能是text/plain,不能是text喷兼；因此為了全兼容瀏覽器(出firefox外)，我們可以寫一個(gè)通用的方法出來后雷，如下：

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);
}
}
};```
測試代碼如下：還是上面測試輸入框的值是否為數(shù)字季惯；每次粘帖上次吠各，都能獲取到黏貼的是文字?jǐn)?shù)據(jù)，代碼如下：
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);
}
});```
理解自動(dòng)切換輸入框或者****textarea****的焦點(diǎn)
比如我們在填寫表單的頁面上勉抓，當(dāng)用戶輸入完自己的數(shù)據(jù)的時(shí)候贾漏，不需要用戶手動(dòng)切換到下一個(gè)輸入框里面去，我們可以自動(dòng)切換去藕筋，這樣的話纵散，對(duì)于用戶體驗(yàn)來說，比較方便隐圾，比如我們現(xiàn)在頁面上有一個(gè)form表單伍掀，這里為了做測試，我們先用一個(gè)輸入框用于手機(jī)號(hào)碼的暇藏，另外一個(gè)是textarea蜜笤，當(dāng)手機(jī)號(hào)碼輸入11位數(shù)字后，會(huì)自動(dòng)切換到textarea中叨咖；當(dāng)然頁面中的隱藏域除外瘩例；代碼如下：
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) {
// 獲取當(dāng)前的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中對(duì)表單input甸各，textarea垛贤，或者select標(biāo)簽的話，提交表單時(shí)趣倾，需要判斷是否為空聘惦，特別對(duì)于在做移動(dòng)端的朋友來說，可以使用HTML5中的新增屬性required儒恋；如下HTML代碼：

<form id="formId"> 
<input type="text" name="input" maxlength=11 required/> 
<textarea></textarea> 
<input type="submit"/>
</form>```
提交時(shí)候善绎，在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)
如上是根據(jù)不同的瀏覽器本身的性質(zhì)來提示的诫尽，因此樣式不同禀酱，所以適合在移動(dòng)端根據(jù)本身瀏覽器內(nèi)核來提示；
但是在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，如果輸入框值為空的話酣藻，會(huì)打印出false出來曹洽；
如果想知道瀏覽器是否支持required這個(gè)屬性的話，我們可以使用如下代碼判斷下辽剧，如果返回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>元素創(chuàng)建的环凿，除了表單所有的共有屬性和方法外梧兼，HTMLSelectElement類還提供了下列屬性和方法；
add(newOption,relOption);向控件中插入新<option>元素智听，其位置在relOption之前羽杰；
multiple:布爾值; 表示是否允許多項(xiàng)選擇，等價(jià)于HTML中的multiple特性到推；
**options: **控件中所有<option>元素的HTMLCollection考赛；
**remove(index): **移除給定位置的選項(xiàng)；
**selectedIndex: **基于0的選中索引莉测，如果沒有該選項(xiàng)颜骤，則值為 -1；
**size: **選擇框中的可見的行數(shù)捣卤。
如下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；
當(dāng)每次切換的時(shí)候董朝，如果有value就打印出值鸠项，如果value=””;則打印空字符串,但是如果option選項(xiàng)沒有指定value,在firfox和chrome下打印出當(dāng)前的文本值，比如上面的文本為E,則值為E子姜；但是IE8及以下祟绊，打印的還是空字符串；
在DOM中,每個(gè)<option>元素都有一個(gè)HTMLOptionElement對(duì)象表示;為方便訪問數(shù)據(jù),對(duì)象添加了如下屬性哥捕；
**index:**當(dāng)前選項(xiàng)在options集合中的索引牧抽；
**label:**當(dāng)前選項(xiàng)的標(biāo)簽，等價(jià)于HTML中的label
**selected:**布爾值遥赚，表示當(dāng)前選項(xiàng)是否被選中扬舒，將這個(gè)屬性設(shè)置為true可以選中當(dāng)前選項(xiàng)。
**text:**選項(xiàng)的文本凫佛；
**value:**選項(xiàng)的值呼巴；
我們還是以上面的form表單作為HTML代碼，我們使用JS來測試下:
如下代碼：

var formId = document.getElementById("formId"),
select = formId.elements['location'];
// 獲取options集合中的第一項(xiàng)選項(xiàng)的文本
console.log(select.options[0].text);
// 打印出A// 獲取options集合中的第一項(xiàng)選項(xiàng)的value
console.log(select.options[0].value);
// 打印出A

對(duì)于下拉框只能選擇一項(xiàng)的選擇框御蒲，訪問最簡單的方式，就是使用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>```
假如頁面初始化的時(shí)候默認(rèn)選擇第二項(xiàng)厚满，那么我們可以先使用selectedIndex的屬性獲取選中的索引，然后根據(jù)索引獲取當(dāng)前的文本和值碧磅；如下JS代碼：

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
  // 獲取當(dāng)前選中的選項(xiàng)的索引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);```
**添加選項(xiàng)**
可以使用javascript動(dòng)態(tài)創(chuàng)建選項(xiàng)碘箍，并將它們添加到選擇框中遵馆，添加選擇框有以下常見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構(gòu)造函數(shù)來創(chuàng)建新選項(xiàng)丰榴，Option構(gòu)造函數(shù)接收2個(gè)參數(shù)货邓，文本(text)和值(value),第二個(gè)參數(shù)可選，比如如下代碼：

var formId = document.getElementById("formId"),
select = formId.elements['location'];
var newOption = new Option("Option text","Option value");
select.appendChild(newOption);```

但是這種方式在IE下是不生效的四濒；
下面我們來看看第三種方式吧换况！是使用選擇框add()方法，DOM規(guī)定這個(gè)方法接收2個(gè)參數(shù)盗蟆，要添加的新選項(xiàng)和將位于新選項(xiàng)之后的選項(xiàng)戈二，如果想在列表的最后添加一個(gè)選項(xiàng)，應(yīng)將第二個(gè)參數(shù)設(shè)置為null喳资；在IE對(duì)add()方法的實(shí)現(xiàn)中觉吭，第二個(gè)參數(shù)是可選的，但是標(biāo)準(zhǔn)DOM瀏覽器中仆邓，必須要指定第二個(gè)參數(shù)鲜滩，因此為了全兼容瀏覽器，我們必須添加第二個(gè)參數(shù)节值，但是我們可以將第二個(gè)參數(shù)設(shè)置為undefined徙硅，含義是：在所有的瀏覽器將新選項(xiàng)插入到列表的最后了~
如下代碼：

var formId = document.getElementById("formId"),
  select = formId.elements['location'];
var newOption = new Option("Option text","Option value");
select.add(newOption,undefined);```
**移除選項(xiàng)的方式如下：**
1. 使用dom的removeChild()方法，為其傳入要移除的選項(xiàng)察署；如下代碼：
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'];
// 第一種：移除第一項(xiàng)如下方式
select.removeChild(select.options[0]);```

  1. 第二種方式是使用選擇框的remove()方法闷游，這個(gè)方法接收一個(gè)參數(shù)，既要移除選項(xiàng)的索引贴汪；如下代碼：
var formId = document.getElementById("formId"),select = formId.elements['location'];// 移除第一項(xiàng)select.remove(0);```

3. 最后一種方式脐往，就是將相應(yīng)的選項(xiàng)設(shè)置為null，如下代碼：

var formId = document.getElementById("formId"),
select = formId.elements['location'];
// 移除第一項(xiàng)
select.options[0] = null;```

理解表單序列化
在javascript中扳埂，可以利用表單字段的type屬性业簿，連同name和value屬性一起實(shí)現(xiàn)對(duì)表單的序列化，序列化后將把這些數(shù)據(jù)發(fā)送給服務(wù)器阳懂。
下面是將那些字段需要進(jìn)行序列化的;

1.對(duì)表單字段的名稱和值進(jìn)行URL編碼梅尤，使用&分割;
2.不發(fā)送禁用的表單字段;
3.只發(fā)送勾選的單選框和復(fù)選框按鈕數(shù)據(jù)；
4.不發(fā)送type為reset和button的按鈕
5.多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目岩调；
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": 
        // 復(fù)選框 
          if(!field.checked) { 
            break; 
          } 
      /* 執(zhí)行默認(rèn)動(dòng)作 */
        default: 
      // 不包含沒有名字的表單字段 
          if(field.name.length) {
            arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value)); 
          } 
        } 
      } 
    return arrs.join("&");
  }```
如上對(duì)form表單序列化的函數(shù)serialize，定義了一個(gè)arrs數(shù)組葱淳，用來保存需要序列化后的名值對(duì)钝腺，然后通過for循環(huán)迭代每個(gè)表單中的字段抛姑，先使用臨時(shí)變量field保存表單中任意一個(gè)字段的引用，然后使用switch語句判斷字段的類型type(如果type未定義的話艳狐，此元素就不需要表單序列化)定硝，第一種情況是select的單選和多選框，對(duì)于select單選框毫目，只可能有一個(gè)選中項(xiàng)蔬啡，對(duì)于多選框可能有零或多個(gè)選中項(xiàng)，如果有選中項(xiàng)的話(通過屬性selected來判斷)蒜茴，需要確定使用什么值星爪，如果不存在value特性，或者雖然存在該特性粉私，但是值為空字符串顽腾，都是使用選項(xiàng)的文本來代替，為檢查這個(gè)特性诺核，在兼容DOM的瀏覽器下我們需要使用hasAttribute()方法抄肖，而在IE中需要使用特性的specified屬性；對(duì)于type=“file”或者submit窖杀，reset漓摩，button等就不支持，如果比如上傳圖片的時(shí)候入客，需要圖片的二進(jìn)制數(shù)據(jù)使用form表單提交的話管毙，可以在序列化后在加上這個(gè)參數(shù)即可；對(duì)于單選框和復(fù)選框如果沒有選中的話桌硫，同樣不進(jìn)行序列化夭咬；下面我們現(xiàn)在來看看一個(gè)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框膀钠，**但是請(qǐng)注意：**上面name=”a”和name=”b”掏湾，當(dāng)他們選中的時(shí)候，沒有值屬性肿嘲，所以在各個(gè)瀏覽器上都會(huì)自帶一個(gè)值為on的值傳給服務(wù)器端融击，但是這個(gè)并不是我們想要的，所以的如果需要值的話雳窟，一定要設(shè)置值砚嘴，如下如下截圖：
在火狐和谷歌下截圖如下：
![](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框多選。
**理解富文本編輯**
在網(wǎng)頁中編輯內(nèi)容兴泥，IE最早引入這個(gè)功能工育，隨后opera，safari搓彻，firefox和chrome也實(shí)現(xiàn)了這個(gè)功能如绸，基本原理就是在頁面中嵌入一個(gè)空HTML頁面的iframe，通過設(shè)置designMode屬性旭贬，這個(gè)空白的HTML頁面可以添加文字怔接，而添加文字則是該頁面的body元素的html代碼，如下所示：
![](http://upload-images.jianshu.io/upload_images/2229907-753e2f8d4d74439a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
designMode有2個(gè)屬性稀轨，off（默認(rèn)值）和on, 當(dāng)設(shè)置為on的時(shí)候扼脐，整個(gè)文檔變得可編輯，但是我們也可以給他們添加css樣式奋刽，為了更加美觀瓦侮；首先我們先來看看demo，如下HTML頁面嵌套一個(gè)iframe佣谐；
<iframe name="richedit" src="bank.html"></iframe>
而bank.html頁面是一個(gè)空頁面肚吏，代碼如下：

<!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，當(dāng)頁面加載完成后狭魂，將designMode屬性設(shè)置為on即可罚攀，如下JS代碼：

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

然后在頁面上顯示如下：


第二種實(shí)現(xiàn)方式是使用contenteditable屬性來實(shí)現(xiàn)
contenteditable屬性是有IE最早實(shí)現(xiàn)的，可以把contenteditable屬性給頁面中的任何元素雌澄，然后用戶可以立即編輯該元素斋泄，不需要iframe，空頁面及JS掷伙，只需要使用contenteditable屬性即可是己；如下代碼給div設(shè)置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摔认；
在移動(dòng)設(shè)備上，有ios5+和Android3+宅粥；
Contenteditable屬性有三個(gè)可能值参袱，true表示打開，false表示關(guān)閉，inherit表示從父元素那邊繼承抹蚀。
[轉(zhuǎn)載自:空智的博客](http://www.cnblogs.com/tugenhua0707/p/4508986.html)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末剿牺，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子环壤，更是在濱河造成了極大的恐慌晒来，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,039評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件郑现，死亡現(xiàn)場離奇詭異湃崩，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)接箫，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門攒读，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人辛友，你說我怎么就攤上這事薄扁。” “怎么了瞎领？”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵泌辫，是天一觀的道長。 經(jīng)常有香客問我九默，道長震放，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任驼修，我火速辦了婚禮殿遂，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘乙各。我一直安慰自己墨礁，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布耳峦。 她就那樣靜靜地躺著恩静，像睡著了一般。 火紅的嫁衣襯著肌膚如雪蹲坷。 梳的紋絲不亂的頭發(fā)上驶乾，一...
    開封第一講書人閱讀 51,692評(píng)論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音循签，去河邊找鬼级乐。 笑死，一個(gè)胖子當(dāng)著我的面吹牛县匠，可吹牛的內(nèi)容都是我干的风科。 我是一名探鬼主播撒轮，決...
    沈念sama閱讀 40,416評(píng)論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼贼穆！你這毒婦竟也來了题山？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,326評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤扮惦，失蹤者是張志新（化名）和其女友劉穎臀蛛，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體崖蜜，經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1贊 316
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年客峭，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了豫领。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡舔琅，死狀恐怖等恐，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情备蚓，我是刑警寧澤课蔬，帶...
    沈念sama閱讀 35,790評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站郊尝，受9級(jí)特大地震影響二跋，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜流昏，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一扎即、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧况凉，春花似錦谚鄙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0贊 22
  • 一樁弒父案闷营，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至知市，卻和暖如春傻盟，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背初狰。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工莫杈， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人奢入。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓筝闹，卻偏偏與公主長得像媳叨，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子关顷，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • 表單基礎(chǔ)知識(shí) 在HTML中糊秆，表單是由 元素來表示的，而在JS中议双，表單對(duì)應(yīng)的則是HTMLFormElement類型痘番。...
    oWSQo閱讀 909評(píng)論 0贊 1
  • HTML表單 在HTML中，表單是 ... 之間元素的集合平痰，它們允許訪問者輸入文本汞舱、選擇選項(xiàng)、操作對(duì)象等等宗雇，然后將...
    蘭山小亭閱讀 3,418評(píng)論 2贊 14
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案昂芜？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1贊 92
  • 這篇文章的主人公叫荔枝 三個(gè)月 我們彼此認(rèn)識(shí)11天 在11天里 我們在醫(yī)院共同奮戰(zhàn)了6天 然后他度過了他短暫而又痛...
    我想養(yǎng)的貓超級(jí)酷閱讀 368評(píng)論 0贊 0
  • 最近舞虱，網(wǎng)絡(luò)上一則有關(guān)平腦癥嬰兒的消息引起了很多人的關(guān)注欢际。國外一對(duì)夫婦，Brandon跟Brittany結(jié)婚后矾兜，懷上...
    meikoyunying閱讀 1,167評(píng)論 0贊 1