表单处理

1. 表单提交

window.onload = function() {

var form = window.getElementById("myForm");

form.onsubmit = function(event) {

//此处做验证处理

}

}

document.onkeyup = function (event) {

if (event.ctlKey  && event.keyCode== 13) {

form.sumbit();  //键盘事件提交表单

}

}

//表单中不能设置值为submit的id或name

2. 表单元素

window.onload = function(){

var form = window.getElementById("myForm");

form.elements; //表单元素集合

form.elements.length; //表单元素个数

form.elements["name"]; //通过name访问表单元素

form.elements["name"].value; //元素值

form.elements["name"].defaultValue; //元素默认值

}

3. 选定文本

window.onload = function(){

var form = window.getElementById("myForm");

user = form.elements["user"];

user.setSelectionRange(0, 1);   //非IE浏览器选定文本

user.focus();   //移入焦点

}

window.onload = function(){

var form = window.getElementById("myForm");

user = form.elements["user"];

var range = user.createTextRange();   //IE浏览器选定文本

range.collapse(true);   //将光标移到文本开头

range.moveStart('character', 0);

range.moveEnd("character", 1);

range.select();

}

4. select事件

window.onload = function(){

var form = window.getElementById("myForm");

user = form.elements["user"];

user.onselect = function() { //非IE浏览器mouse up时触发，IE浏览器mouse down有选定就触发

alert(user.selectionStart); //非IE浏览器选定起始位置

alert(user.selectionEnd); //非IE浏览器选定结束位置

}

}

window.onload = function(){

var form = window.getElementById("myForm");

user = form.elements["user"];

user.onselect = function() { 

alert(document.selection.createRange().text);  //IE浏览器选定文本

}

}

5. 文本过滤输入

window.onload = function(){

var form = window.getElementById("myForm");

user = form.elements["user"];

user.onkeypress = function(event) {

var event = event || window.event;

var charCode = getCharCode(event);

if (!/d/.test(String.fromCharCode(charCode)) && charCode > 8) {

event.preventDefault();   //非数字键禁止输入

}

}

user.oncopy = function(event) {

var event = event || window.event;

event.preventDefault();    //禁止复制

}

user.oncut = function(event) {

var event = event || window.event;

event.preventDefault();    //禁止剪切

}

user.style.imeMode = "ime-mode: disabled"; //禁止输入法，但是chrome浏览器无效

user.onkeyup = function (event) {

this.value = this.value.replace(/[^d]/g, ''); //替换掉非数字

}

}

6. 选择框

<form id="myForm" name="yourForm">

<select name="city">

<option value="上海">上海</option>

<option value="北京">北京</option>

</select>

</form>

window.onload = function(){

var form = window.getElementById("myForm");

city = form.elements["city"];

city.multiple = true; //开启关闭多选

city.size = 5; //列表大小

city.options; //列表选项列表

city.options[0].value; //option值

city.options[0].text; //option文本

city.selectedIndex; //选择的选项索引

city.options[2].selected = true; //设置选定项

var option = document.createElement("option");

var text = document.createTextNode("南京");

option.appendChild(text);

option.setAttribute("value", "南京");

city.appendChild(option);

var option = new Option("南京", "南京");

city.appendChild(option); //IE浏览器不支持

city.add(option, undefined); //IE浏览器

city.remove(0); //删除option

city.insertBefore(city.options[3], city.options[1]); //移动元素

}