submit相关

当使用 submit 按钮或者 image  或者button type="submit"   来提交表单时,会触发 submit 事件,但是直接javascript调用submit() 提交的话, 不会触发submit()

而使用javascript调用 reset() 的话则会继续触发 reset() 事件

点击submit时,有些浏览器先触发click事件,有些浏览器先触发submit事件,因此不能依赖

 

防止重复提交表单

1、<input type=”button” value=”Submit”  onclick=”this.disabled=true; this.form.submit()” />

不使用 submit 按钮因为它会在提交之前就被禁止,所以表单不会被提交

2、另外一种方法是监听onsubmit事件,发现重复提交请求就取消掉

 

访问表单字段

表单里面的控件元素同时属于表单集合,属于表单的属性,可以使用索引和name来访问:

var form = document.getElementById(“form1”);
var field1 = form.elements[0];                           //获得表单里的第一个元素
var field2 = form.elements[”textbox1”];                     //获得name为textbox的元素,如果多个元素name一致,那么将返回HTMLcollection集合

注:form[0]和form["name"]是为了兼容旧的浏览器,如果可以应该使用form.element[0]的形式

 

输入框

输入框(text或者textarea)当里面的文字在获取焦点以后发生了变化,当失去焦点以后会触发change事件(因此可以拿来验证用户的输入是否正确),如果同时指定了 blur()  和  change()  , 哪个先触发因浏览器而会不同。同时修改输入框值的时候直接使用element.value更好,而不推荐使用setAttribute()

输入框有一个select方法,可以用来选中里面的文字,同时也提供了select事件,但是无法知道哪些内容被选中,HTML5提供了两个属性selectionEnd,selectionStart,可以获取选择开始和结束的位置,再配合切割就可以获取啦,对于旧的ie浏览器可以使用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;

    }

}

同时HTML5也提供了一个部分文字选择的方法:setSelectionRange

textbox.value = “Hello world!”

textbox.setSelectionRange(0, 3);       //”Hel”

 

keypress 事件只有当代表字符的按键按下时才会触发,禁用默认行为就能阻止输入任何字符,但是有些浏览器按上下左右之类的也会触发,还好在火狐所有触发keypress的非字符按键字符为0,Safari 3 以前的则返回字符8,所以不要阻止10一下的:

textbox.addEventListener( “keypress”, function(event){

    var target = event.target;

    var charCode = EventUtil.getCharCode(event);

    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){                   //String.fromCharCode 将ascii码转成字符串

        EventUtil.preventDefault(event);

    }

});

onkeydown 只要键盘按键被按下就会触发

 

an empty string is always considered to be present in any string

 

当一个表单控件获得焦点的时候,按下enter按钮,就会提交表单。如果没有submit按钮的话,则不会提交。还有一个例外的就是textarea,它会换行咯

 

可以为text输入框指定pattern属性,该属性接收正则表达式,只有匹配的内容才能输入,^代表开头,$代表结尾

var pattern = document.forms[0].elements[“count”].pattern;

 

 

change事件,在不同的表单控件上触发的时间也有差异,对于input和textarea,当他们失去焦点并且里面的值有变化就会触发。对于select元素,只要改变了选项就会触发,不用等到失去焦点。

 

 

使用checkValidity()可以用来检测输入框输入的数据是否符合预定条件,也可以用在表单上form.checkValidity(),如果每个输入框都符合条件才返回true。检测出错误以后可以使用validity对象定位错误类型,该对象有很多错误类型属性,例如required没有填写数据的话↓

badInput: false

customError: false

patternMismatch: false

rangeOverflow: false

rangeUnderflow: false

stepMismatch: false

tooLong: false

typeMismatch: false

valid: false

valueMissing: true


但是可以设置关闭检测直接<form novalidate>,这样的话会忽略对该表格内输入内容的检测,也可以用document.forms[0].noValidate = true;设置。可以在submit按钮上设置<input type=”submit” formnovalidate name=”btnNoValidate” value=”Non-validating Submit”>那么按这个按钮提交就不会检测了。

 

通常只有表单元素才可以设置focus,但是可以通过把元素的tabIndex设为-1来让任意元素都可以focus

 

textbox有一个select()方法,用来选中里面的文字,同时也提供了select事件,当textbox里面的文字被选中时触发

 

<input> 和 <button>可以动态改变type属性,但 <select> 的type属性是只读的

 

在隐藏的表单元素上调用focus方法会报错,不管是hidden类型还是用css隐藏的。

 

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: //fieldset
case ”file”: //file input
case ”submit”: //submit button
case ”reset”: //reset button
case ”button”: //custom button
break;
case ”radio”: //radio button
case ”checkbox”: //checkbox
if (!field.checked){
break;
}
/* falls through */
default:
//don’t include form fields without names
if (field.name.length){
parts.push(encodeURIComponent(field.name) + ”=” + 
encodeURIComponent(field.value));
}
}
} 
return parts.join(”&”);
}