form 表单处理

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(”&”);

}