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";
富文编辑略。。。。
评论已关闭