js笔记--表单

1.表单基础知识

JS中表单类型是：HTMLFormElement。继承 HTMLElement。和其他HTML元素有相同的属性。独有属性如下：

• acceptCharset：服务器能处理的字符集；等价于HTML中的accept-charset特性
• action：接收请求的URL；等价于HTML中的action特性
• elements：表单中所有控件的集合(HTMLCollection)
• enctype：请求的编码类型；等价于HTML中的enctype特性
• length：表单中控件的数量
• method：http请求类型，get或post
• name：表单名
• reset()：重置表单
• submit()：提交表单
• target：发送请求和接收响应的窗口名称

获取form表单：

一：document.getElementById("id");

二：document.forms[0] 或  document.forms["formname"]

1.提交表单

<!-- 通用提交按钮--><input type="submit" value="submit"><button type="submit">submit</button><!--图像按钮提交表单--><input type="image" src="flag.png">

提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。可以在事件处理程序中验证表单数据。阻止事件的默认行为可以取消表单提交。

var form = document.forms["myform"];console.log(form);EventUtil.addHandler(form,"submit",function(event){console.log(event);//取消表单提交event.preventDefault();});//直接调用submit()方法提交表单。不会触发submit事件form.submit();

表单重复提交问题：解决方法，在第一次提交表单后禁用提交按钮。或利用onsubmit事件处理程序取消后续的表单提交操作

2.重置表单

使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。

<input type="reset" value="重置"><button type="reset">重置</button>

重置会触发reset事件，可以在事件处理程序中取消重置

var form1 = document.forms["myform"];EventUtil.addHandler(form1,"reset",function(event){//阻止reset事件默认行为event.preventDefault();});

form.reset()方法重置表单会触发reset事件

3.表单字段

每个表单都有elements属性，该属性是表单中所有元素的集合(<input>,<textarea>,<button>,<fieldset>)。这个集合是一个有序列表，每个表单字段在集合中的顺序就是它们出现在标记中的顺序。可按照位置和name特性来访问它们。

var form1 = document.forms["myform"];//获取表单中的第一个字段var field1 = form1.elements[0];//根据属性名获取表单元素var field2 = form1.elements["username"];var fieldCount = form1.elements.length;console.log(field1);console.log(field2);console.log(fieldCount);

1.共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。

• disabled：表示当前字段是否被禁用
• form：指向当前字段所属表单的指针；只读
• name：字段名称
• readOnly：只读
• tabIndex：当前字段的切换(tab)序号
• type：当前字段的类型
• value：当前字段提交给服务器的值。对文件字段来说，这个属性是只读的

var form1 = document.forms["myform"];var field1 = form1.elements[0];var fields = form1.elements;console.log(field1.form === form1); //true//监听表单提交事件EventUtil.addHandler(form1,"submit",function(event){var submitForm = event.target;var btn = submitForm.elements["submit_btn"];//提交表单时让提交按钮不可用btn.disabled = true;event.preventDefault();});

2.公有的表单字段方法

focus()和blur()

页面加载完后焦点移到第一个字段  html5   autofocus属性，布尔值，自动聚焦。

EventUtil.addHandler(window,"load",function(){var element = document.forms[0].elements[0];if(element.autofocus !== true){element.focus();}});

3.共有表单字段事件

blur：

change：

focus：

2.文本框脚本

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

1.选择文本

获取焦点时选中文本内容

var username = document.forms[0].elements["username"];EventUtil.addHandler(username,"focus",function(event){event.target.select();});//选择事件EventUtil.addHandler(username,"select",function(event){console.log("selected");});

2.获取选择的文本

//选择事件EventUtil.addHandler(username,"select",function(event){console.log(username.value.substring(username.selectionStart,username.selectionEnd));});

3.选择部分文本

2.过滤输入

1.屏蔽字符

var username = document.forms[0].elements["username"];EventUtil.addHandler(username,"keypress",function(event){var charCodeStr = String.fromCharCode(event.charCode);console.log(charCodeStr);//如果是非数字，且不是向上向下，空格等键,没有按下Ctrl键（复制，粘贴）if(!/\d/.test(charCodeStr)&&event.charCode>9&&!event.ctrlKey){event.preventDefault();}});

2.自动切换焦点

//当前文本框输入完成后自懂焦点切换到下一个元素

(function(){function tabForward(event){var target = event.target;//如果输入完成if(target.value.length == target.maxLength){var form = target.form;for(var i=0;i<form.elements.length;i++){if(form.elements[i] == target){if(form.elements[i+1]){form.elements[i+1].focus();}return;}}}}var text = document.forms[0].elements["username"];EventUtil.addHandler(text,"keyup",tabForward);})();

3.html5约束验证

1.必填字段  required

<input name="username" type="text" value="hehe" maxlength="3" required>

2.其他输入类型

<input name="email" type="email"><input name="url" type="url">

3.输入模式  pattern

接收正则表达式

<input name="username1" type="text" pattern="\d+">

4.检测有效性

checkValidity()检测表单中的某个字段是否有效

var form = document.forms[0];form.checkValidity();//表单所有元素验证通过才返回trueEventUtil.addHandler(form,"submit",function(event){var username = document.forms[0].elements["username"];if(username.checkValidity()){//有效console.log("正确");event.preventDefault();}else{//无效，表单不提交console.log("错误");event.preventDefault();}});

5.禁用脚本
通过设置表单的novalidate属性

如果表单有多个提交按钮，可以指定某个提交按钮不验证表单。通过在按钮上添加formnovalidate属性。

var form = document.forms[0];form.novalidate = true;//禁用验证

3.选择框脚本

• add：添加新<option>元素
• multiple：是否多选项
• options：<option>元素的HTMLCollection集合
• remove(index)：移除指定位置的选项
• selectedIndex：选中项的索引
• size：选择框中可见的行数

<option>选项属性

• index：当前选项在options集合中的索引
• label：当前选项的标签
• selected：是否选中，设置为true时可以选中当当前选项
• text：选项的文本
• value：选项的值

选中了选项就会触发选择框的change事件

1.选择选项

var selectbox = document.forms[0].elements[0];EventUtil.addHandler(selectbox,"change",function(event){for(var i=0;i<selectbox.options.length;i++){var option = selectbox.options[i];if(option.selected){console.log(option.value+"  "+option.text);}}});

2.添加选项

方式一：

var selectbox = document.forms[0].elements[0];var option = document.createElement("option");option.value="5";option.text = "sun qi";selectbox.appendChild(option);

方式二：使用Option构造函数来创建新选项

var option1 = new Option("qianba","6");selectbox.appendChild(option1);

方式三：使用选择框的add()方法，接收两个参数，一：添加的选项。二：位于新选项后的选项。跨浏览器在最后添加选项，第二个参数给undefined

var selectbox = document.forms[0].elements[0];var option = new Option("ethan","5");selectbox.add(option,undefined);//最佳方案

3.移除选项

使用DOM的 removeChild()

选择框的remove(index)方法

selectbox.removeChild(selectbox.options[0]);selectbox.remove(0);

4.移动和重排选项

移动和移除选项都会重置每个选项的index属性

insertBefore();在指定元素前插入要移动的选项

var optionToMove = selectbox.options[0];selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

4.表单序列化

浏览器提交表单数据过程：

• 对表单字段的名称和值进行URL编码，使用&符分隔
• 不发送禁用的表单字段
• 只发送勾选的复选框和单选按钮
• 不发送type为"reset"和"button"的按钮
• 多选框中的每个选中的值单独一个条目
• 在单击提交按钮提交表单时，也会发送提交按钮；否则不发送提交按钮。包括type为"image"的input元素
• select元素的值就是选中的选项的value值，如果没有value就为文本值

表单序列化代码：

function serialize(form){var parts = [],  //要提交的数据field = null,i,len,j,optLen,option,optValue;//遍历表单元素for(i=0;i<form.elements.length;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){//支持hasAttribute方法获取属性//有value属性就返回value的值，没有就返回文本值optValue = (option.hasAttribute("value")?option.value:option.text);}else{optValue = (option.attributes["value"].specified?option.value:option.text);}//数组中添加要提交的数据字符串parts.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){parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));}}}return parts.join("&");//返回表单要提交的内容}

DOM兼容的浏览器中使用hasAttribute()来获取属性值，IE中使用specified属性来判断

如果表单中包含<fieldset>元素，该元素会出现在元素集合中，type属性不存在。因此，如果type属性未定义，就不需要对其进行序列化。

5.富文本编辑

WYSIWYG(What you see is what you get,所见即所得)。在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性来使HTML页面可以被编辑。编辑元素就是该页面<body>元素的HTML代码。designMode属性默认值"off", “on”表示可编辑。

EventUtil.addHandler(window,"load",function(){var frame = window.frames["richedit"];frame.document.designMode = "on";});</script><body><iframe name="richedit" src="h2.html" style="width:300px;height:300px;" />

1.使用contenteditable属性

<div id="editDiv" contenteditable>hehe</div>

属性可以给页面中任何元素使用(使该元素可编辑)

var div = document.getElementById("editDiv");div.contentEditable = "true";div.contentEditable = "false";

true：打开。false：关闭。inherit：从父元素那里继承

2.操作富文本

document.execCommand()方法可以对文档执行预定义的命令。

3个参数：一，要执行的命令名称;二，浏览器是否提供界面(false)；三，执行命令必须的值(不需要值就传递null)

EventUtil.addHandler(window,"load",function(){var richEditFrame = window.frames["richEdit"];richEditFrame.document.designMode  = "on";richEditFrame.document.execCommand("bold",false,null);richEditFrame.document.execCommand("createlink",false,"http://www.baidu.com");var div = document.getElementById("editDiv");div.contentEditable = "true";document.execCommand("bold",false,null);});

3.表单与富文本

由于富文本编辑是使用iframe而非表单控件实现的。要提交富文本编辑中的内容，需要我们手工提取并提交HTML。通常添加一个隐藏字段，在表单提交前，将从iframe中提取的HTML赋值给隐藏字段。

EventUtil.addHandler(document.forms[0],"submit",function(){ document.forms[0].elements["comments"].value = window.frames["richEdit"].document.body.innerHTML;});

小结：

• 在文本框内容变化时，可以监听键盘事件来检查插入的字符，从而允许或禁止用户输入某些字符