零js基礎 | 程序設計 | 14 - 表单
var form = document.getElementById("form1");
var firstForm = document.forms[0];
var myForm = document.forms["form2"]; objform.elements('objid')获取方法
<form action="" name='myFormname' id="myForm">
<textarea name="" id="" cols="30" rows="10" name='textbox' id='textbox'></textarea>
<ul>
<li>
<input type="radio" name="colorName" id='colorID1' value="red">Red</li>
<li>
<input type="radio" name="colorName" id='colorID2' value="green">Green</li>
<li>
<input type="radio" name="colorName" id="colorID3" value="blue">Blue</li>
</ul>
</form> var formId = document.getElementById('myForm')
var formName = document.getElementsByName('myFormname')[0]
var form0 = document.forms[0]
var colorId = formId.elements['colorName']
alert(colorId.length)//3
var colorName = formName.elements['colorName']
alert(colorName.length)//3，有3 个单选按钮，它们的name 都是"color"，意味着这3 个字段是一起的。
在访问elements["color"]时，就会返回一个NodeList，其中包含这3 个元素；不过，如果访问
elements[0]，则只会返回第一个元素。来看下面的例子。
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true除了fieldset元素之外，所有表单字段都拥有相同的一组属性。由于input类型可以表示多
种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。表单字段共有的
属性如下。
disabled：布尔值，表示当前字段是否被禁用。
form：指向当前字段所属表单的指针；只读。
name：当前字段的名称。
readOnly：布尔值，表示当前字段是否只读。
tabIndex：表示当前字段的切换（tab）序号。
type：当前字段的类型，如"checkbox"、"radio"，等等。
value：当前字段将被提
var filed = form.elements[0]
filed.value = 'auther Value'
alert(filed.form === form) //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改type 属性（不推荐，但对input来说是可行的）
field.type = "checkbox";这就是个问题：因为会导致费用翻番。
为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听submit 事件，并在该事件
发生时禁用提交按钮即可。以下就是这样一个例子。
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});注意，不能通过onclick 事件处理程序来实现这个功能，原
因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的submit 事件之前触发click 事件，
而有的浏览器则相反。对于先触发click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果
永远都不会提交表单
focus()和 blur()。
EventUtil.addHandler(window, "load", function(event){
document.forms[0].elements[0].focus();
});要注意的是，如果第一个表单字段是一个input元素，且其type 特性的值为"hidden"，那么
以上代码会导致错误。另外，如果使用CSS 的display 和visibility 属性隐藏了该字段，同样也会
导致错误。
HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，
不用JavaScript 就能自动把焦点移动到相应字段。例如：
<input type="text" autofocus>检测是否支持autofocus属性
EventUtil.addHandler(window, "load", function(event) {
var element = document.forms[0].elements[0];
if (element.autofocus !== true) {
element.focus();
console.log("JS focus");
}
});共有字段事件
blur：当前字段失去焦点时触发。
change：对于input和textarea元素，在它们失去焦点且value 值改变时触发；对于
select元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。
。对于input和textarea元素，当它们从获得焦点到失去焦点且value 值改变时，
才会触发change 事件。对于select元素，只要用户选择了不同的选项，就会触发change 事件；
换句话说，不失去焦点也会触发change 事件
获得焦点时选择所有文本
var textbox = document.forms[0].elements["textbox1"];
textbox.select();取得选择的文本selectionStart 和selectionEnd 即文本选区开头和结尾的偏移
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}因为substring() 方法基于字符串的偏移量执行操作， 所以将selectionStart 和
selectionEnd 直接传给它就可以取得选中的文本。
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;
}
}input textarea
选择部分文本：
setSelectionRange()方法。
现在除select()方法之外，所有文本框都有一个setSelectionRange(第一个字符的索引,要选择的和要选择的最后一个字符之后的字符的索引)
（类似于substring()方法的两个参数）。来看一个例子。
var forminp = document.forms[0].elements[0]
// console.log(form1)
// console.log( form1.value)
forminp.value = 'hello world'
forminp.setSelectionRange(0,forminp.value.length) //选中hello world
forminp.setSelectionRange(0,3) //选中hel
IE8以下，不作讨论
textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有文本
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length); //"Hello world!"
range.select();
//选择前3 个字符
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select(); //"Hel"
//选择第4 到第6 个字符
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select(); //"o w"跨浏览器
function selectText(textbox, startIndex, stopIndex) {
if (textbox.setSelectionRange) {
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange) {
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character", startIndex);
range.moveEnd("character", stopIndex - startIndex);
range.select();
}
textbox.focus();
}这个selectText()函数接收三个参数：要操作的文本框、要选择文本中第一个字符的索引和要选
择文本中最后一个字符之后的索引
textbox.value = "Hello world!"
//选择所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//选择前3 个字符
selectText(textbox, 0, 3); //"Hel"
//选择第4 到第6 个字符
selectText(textbox, 4, 7); //"o w"过滤输入
下列代码只允许用户输入数值。
EventUtil.addHandler(textbox, "keypress", function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))) {
EventUtil.preventDefault(event);
}
});。这意味着，仅考虑到屏蔽不是数值的字符还不够，还要避免屏蔽这些极为常用和必要的键
在Firefox 中，所有由非字符键触发的keypress 事件对应的字符编码为0，而在Safari 3 以前的版本中，对应的字符编码全部为8。为了让代码更通用，只要不屏蔽那些字符编码小于10 的键即可
EventUtil.addHandler(textbox, "keypress", function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) {
EventUtil.preventDefault(event);
}
});还有一个问题需要处理：复制、粘贴及其他操作还要用到Ctrl 键。在除IE 之外的所有
浏览器中，前面的代码也会屏蔽Ctrl+C、Ctrl+V，以及其他使用Ctrl 的组合键。因此，最后还要添加一
个检测条件，以确保用户没有按下Ctrl 键
EventUtil.addHandler(textbox, "keypress", function(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
!event.ctrlKey) {
EventUtil.preventDefault(event);
}
}); beforecopy：在发生复制操作前触发。
copy：在发生复制操作时触发。
beforecut：在发生剪切操作前触发。
cut：在发生剪切操作时触发。
beforepaste：在发生粘贴操作前触发。
paste：在发生粘贴操作时触发。
在Safari、Chrome 和Firefox
中，beforecopy、beforecut 和beforepaste 事件只会在显示针对文本框的上文菜单（预期将发
生剪贴板事件）的情况下触发
，IE 则会在触发copy、cut 和paste 事件之前先行触发这些事件
在实际的事件发生之前，通过beforecopy、beforecut 和beforepaste 事件可以在向剪贴板发
送数据，或者从剪贴板取得数据之前修改数据。不过，取消这些事件并不会取消对剪贴板的操作——只
有取消copy、cut 和paste 事件，才能阻止相应操作发生。
访问剪贴板 -- 》用clipboardData 对象 IE- - window对象，这个对象是相应event 对象的属性；在Firefox、Safari 和Chorme 中，只有在处理剪贴板事件期间clipboardData 对象才有效，
，这是为了防止对剪贴板
的未授权访问；在IE 中，则可以随时访问clipboardData 对象。为了确保跨浏览器兼容性，最好只
在发生剪贴板事件期间使用这个对象。
clipboardData 对象有三个方法：getData(取得数据的格式)、setData()和clearData()
在IE 中，有两种数据格式："text"
和"URL"。在Firefox、Safari 和Chrome 中，这个参数是一种MIME 类型；不过，可以用"text"代表
"text/plain"。
类似的其它方法也一样'
扩展getClipboardText与setClipboardText方法；
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;
}
},
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;
}
},
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;
}
},
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;
}
},
getButton: function(event) {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
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);
}
}
}
例如，如果一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在paste
事件中，可以确定剪贴板中的值是否有效，如果无效，就可以像下面示例中那样，取消默认的行为。
EventUtil.addHandler(textbox, "paste", function(event) {
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardText(event);
if (!/^\d*$/.test(text)) {
EventUtil.preventDefault(event);
}
});自动切换焦点：
<form action="" name='myFormname' id="myForm">
<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
</form>，用户在第一个文本框中输入了3 个数字之后，焦点就会切换到第二个文
本框，再输入3 个数字
(function() {
function tabForward(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength) {
var form = target.form;
for (var i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i + 1]) {
form.elements[i + 1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();HTML5验证
必填字段
<input type="text" name="username" required>可以检查某个表单字段是否为必填字段。
var isUsernameRequired = document.forms[0].elements["username"].required;使用下面这行代码可以测试浏览器是否支持required 属性。
var isRequiredSupported = "required" in document.createElement("input");其它输入类型
<input type="email" name ="email"> //会把-@-当作有效电子邮件地址
<input type="url" name="homepage">要检测浏览器是否支持这些新类型，可以在JavaScript 创建一个<input>元素，然后将type 属性
设置为"email"或"url"，最后再检测这个属性的值
var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");例如，想让用户只能输入0 到100 的值，而且这个值必须是5 的倍数，可以这样写代码：
<input type="number" min="0" max="100" step="5" name="count">- 输入模式
HTML5 为文本字段新增了pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的
值。例如，如果只想允许在文本字段中输入数值，可以像下面的代码一样应用约束：
<input type="text" pattern="\d+" name="count">注意，模式的开头和末尾不用加^和$符号（假定已经有了）。这两个符号表示输入的值必须从头到
尾都与模式匹配。
使用以下代码可以检测浏览器是否支持pattern 属性。
var isPatternSupported = "pattern" in document.createElement("input");检测有效性
用checkValidity()方法可以检测表单中的某个字段是否有
if (document.forms[0].elements[0].checkValidity()){
//字段有效，继续
} else {
//字段无效
}可以在表单自身调用checkValidity()方法。如果所有表单字段都有
效，这个方法返回true；即使有一个字段无效，这个方法也会返回false。
if(document.forms[0].checkValidity()){
//表单有效，继续
} else {
//表单无效
}
function validity(){
console.log( document.forms[0].elements['emailName'].validity )
console.log( document.forms[0].elements['emailName'] )
}因此，要想得到更具体的信息，就应该使用validity 属性来检测表单的有效性。下面
var input = document.forms[0].elements['emailName']
if (input.validity && !input.validity.valid) {
if (input.validity.valueMissing) {
alert("Please specify a value.")
} else if (input.validity.typeMismatch) {
alert("Please enter an email address.");
} else {
alert("Value is invalid.");
}
}禁用验证
通过设置novalidate 属性，可以告诉表单不进行验证。
<form method="post" action="signup.php" novalidate>
<!--这里插入表单元素-->
</form>
document.forms[0].noValidate = true; //禁用验证如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上
添加formnovalidate 属性。
<form method="post" action="foo.php">
<!--这里插入表单元素-->
<input type="submit" value="Regular Submit">
<input type="submit" formnovalidate name="btnNoValidate"
value="Non-validating Submit">
</form>//禁用验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;选择框脚本
select option创建
add(newOption,relOption):插入新的option，其位置相关项relOption之前
multiple，布尔值，允许多项选择，等价于html中的multiple特性；
remove(index)，移除给定位置的选项
size:选择框中可见的行数，等价于html中的size特性；
选择的type属性不是'select-one'就是'select-mutiple'这取决于HTML代码中有没有multiple特性；选择框的value属性由当前选中项决定，相应规则如下：
如果没有选中的项，则选择框的value 属性保存空字符串。
如果有一个选中项，而且该项的value 特性已经在HTML 中指定，则选择框的value 属性等
于选中项的value 特性。即使value 特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的value 特性在HTML 中未指定，则选择框的value 属性等于该
项的文本。
如果有多个选中项，则选择框的value 属性将依据前两条规则取得第一个选中项的值。
以下面的选择框为例：
var sel = document.getElementById('selLocation');
console.log(sel.value)<select name="location" id="selLocation">
<option value="Sunnyvale, CA" selected>Sunnyvale</option> // Sunnyvale, CA
<option value="" selected>Sunnyvale</option> // 空 ''
<option selected>Australia</option> //没有value , //Australia
</select>每个<option>元素都有一个HTMLOptionElement 对象表示，有下列属性：
index：当前选项在options 集合中的索引。
label：当前选项的标签；等价于HTML 中的label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为true 可以选中当前选项。
text：选项的文本。
value：选项的值（等价于HTML 中的value 特性）。
访问值：DOM方法（不推荐，效率低）
var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].firstChild.nodeValue;
var value = selectbox.options[0].getAttribute('value')
console.log(value)选项属性代码：(推荐)
var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
console.log(value) 对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的selectedIndex 属性
//选中的项
var selectedOption = selectbox.options[selectbox.selectedIndex]
console.log(selectedOption) //<option selected="">Australia</option>
console.log('selected index: '+ selectbox.selectedIndex)
console.log('selected text: '+ selectedOption.text)
console.log('selected value: '+ selectedOption.value)
设置select
selectbox.options[0].selected = true;
//但设置多个
selectbox.options[1].selected = true;
selectbox.options[0].selected = true; //后面覆盖前面添加option选项一：
var newOption = document.createElement('option')
newOption.appendChild(document.createTextNode('option text'))
newOption.setAttribute('value','Option value')
selectbox.appendChild(newOption)添加option选项二：Option构造函数，第二个参数可选（IE8不支持）
var newoption = new Option('option txt','option value')
selectbox.appendChild(newoption)添加option选项三：
add(要添加的新选项，位于新选项之后的选项)，为第二个参数传undefined
var nnoption = new Option('ooption ttt','option value')
selectbox.add(nnoption,undefined) //最佳移除选项
//1
selectbox.removeChild(selectbox.options[0])
//2
selectbox.remove(0)
//3
selectbox.options[0] = null
//移除所有
function clearSelect(selectbox){
for(var i=0;i<selectbox.options.length;i++){
selectbox.remove(i)
}
}
clearSelect(selectbox)移动和重排选项
一个select的option移到另一个select的options
如果为appendChild()方法传入一个文档中已有的元素，那么就从该元素的父节点中移除它，再把它添加到指定的位置
var sel = document.getElementById('selLocation');
var sel2 = document.getElementById('selLocation2');
sel2.appendChild(sel.options['caname'])要将选择框中的某一项移动到特定位置，最合适的DOM 方法就是insertBefore()；appendChild()方法只适用于将选项添加到选择框的最后。要在选择框中向前移动一个选项的位置，可以使用以下代码：
//向前移动一个选项
var optionMoveTo = sel.options[1];
sel.insertBefore(optionMoveTo,sel.options[optionMoveTo.index-1])表单select序列化
function serialize(form) {
var parts = [],
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);
}
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("&");
}马上变成可编辑选项,contenteditable
<div class="editable" id="richedit" contenteditable></div>也可在关闭
var div = document.getElementById("richedit");
div.contentEditable = "true";富文编辑略。。。。
