javascript操作表单

获取表单

1，getElementById()

2，getElementsByTagName()

3，documents.forms[] 每个form为一个数组元素

4，document.forms[‘name’] 通过name获取

5，docment.name 使用name直接获取。较方便。

PS:

event.preventDefault()：方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）

IE:

window.event.returnValue = false;

function stopDefault(evt){
var e = evt || window.event
//非IE
if(e && e.preventDefault)
e.preventDefault();
//IE
else
window.event.returnValue = false;
}

使用preventDefault() 阻止默认提交行为：

window.onload = function(){
var submit = document.forms[0];
submit.onsubmit = preventDefault;    // 使用所在的表单调用submit函数
}

普通按钮实现提交事件（其他元素也可以）：

var data = document.getElementById("button");
data.onclick = function(){
document.forms[0].submit();
}

获取表单字段

elements: 所有表单控件的集合，非表单控件会被忽略

elements.length: 获取表单控件的数量

name: 获取name属性值

type: 获取控件的type属性，可以更改（不建议修改）

form: 获取所在的form对象

value: 获取表单控件的value值

disabled: 关闭控件

focus(): 自动将焦点移入

blur(): 自动将焦点移出

也可以通过name获取

获取表单控件： document.表单名.表单元素名 (在表单和控件都有name属性的情况下)

访问值： document.表单名.表单元素名.value

事件：

blur 失去焦点时触发（鼠标点击）

focus 获得焦点时触发

change 文本框的文本改变时触发

也可以使用 elements[“name”] 获取表单控件元素,如果多个元素使用同一个name，则返回一个集合

window.onload=function(){
var form = document.forms[0].elements;
alert("表单控件的数量: "+form.length);     // 3
alert("name: " +form[0].name);              // input
alert("type: " +form[0].type);              // input
alert("form: " +form[0].form);              // 对象
alert("form[0].value: " +form[0].value);    //twilight
form[1].disabled = true;                    // 控件被禁用
form[0].focus();                            // 加载完毕时自动获得焦点
}

表单如下：

<form name="form1" method="get">
姓名: <input type="text" name="input" size=10 />
<input type="submit" value="提交" />
<input type="button" value="普通按钮" id="button" />
</form>

文本框脚本

value 获取文本框中的值（HTML DOM）

defaultValue 获取默认值

select() 选定文本

textarea没有value属性，但是在js中可以用value获取textarea的文本内容

function showValue(){
var data = document.forms[0].elements[0];
alert(data.value);          // 获取文本框中的值
alert(data.defaultValue);   // 获取默认值
data.select();              // 选定文本框中的文本
date.focus();               // 自动获得焦点
alert("文本框的内容："+document.forms[0].elements[1].value);   // 通过value获得textarea的内容
}

赋值粘贴

copy 复制时触发

cut 剪切时触发

paste 粘贴时触发

beforecopy 复制前

beforecut 剪贴前

beforepaste 粘贴前

自动切换焦点

<script>
window.onload = function(){
var form = document.forms[0];
var elem = form.elements;
elem[0].onkeyup = transform;
elem[1].onkeyup = transform;
elem[2].onkeyup = transform;

function transform(evt){
var event = evt || window.event;
//              alert(this);
var maxlength = this.maxLength;
var length = this.value.length;
4000

//              alert(maxlength+":"+length);
if(length==maxlength){
for(var i=0;i<form.length;i++){
if(form[i] === this){
form[++i].focus();
return;
}
}
}
}
}

</script>

<form>
<input type="text" size="10" maxlength="1" />
<input type="text" size="10" maxlength="3" />
<input type="text" size="10" maxlength="5" />
<input type="text" size="10" maxlength="10" />
</form>

下拉选择框

通过elements获得对象



1，multiple 多选

2，selected 判断当前对象是否被选中（由option调用）

3，options获取option集合

4，value 选项的值

5，text 选项标签中的文本

6，selectedIndex 选中的索引（从0开始），默认是-1（可改变，会自动定位）（由select对象调用）

options[selectIndex].value 获取选中的value

var form = document.form1;           // 通过name获取表单
var option = form.school.options;    // 获取select标签下的option对象集合
alert(option[0].value);              // 获取第一个option对象的value
alert(form.school.selectedIndex);    // 用selectedIndex获得选中的索引，由表单控件select对象调用

对于单选下拉框，可以用下面的方式获取选中的对象的值：

document.form1.schools.value

但是对于复选下拉框，这种方法无法获得选中的值，schools是select标签上的name，但是对于复选下拉框会返回一个数组，数组内容是所有的option对象的集合

alert(document.form1.schools.value);        //可以直接获取单选下拉框中被选择的value，但是多选下拉框不可以
alert(document.form1.schools[0].value); //对于复选下拉框，可用select对象获取option的value
alert(document.form1.schools[0].selected);  //复选下拉框用selected判断是否被选择，而单选按钮用checked判断是否被选择

添加选项：

用构造函数创建对象:

var option = new Option(“text”,”value”)

city.appendChild(option);

或者：

add(对象，位置)—–

IE : add(对象,undefined)

移除选项：

remove(index);

互换位置

insertBefore(对象，对象);

单选按钮

用 document.myForm.gender 获得单选按钮数组

访问元素的值： document.myForm.gender[索引].value

判断是否被选中： document.myForm.gender[索引].checked

<form name = “myForm” >
<input type=“radio” name=“gender” value=“male”/>
<input type=“radio” name=“gender” value=“female”/>
</form>