html5获取当前表单位置,JavaScript 之 DOM [ 表单操作 ]

表单操作

获取表单元素

Document对象提供了单独的获取方式

document.forms

该属性会得到一个类数组集合

/* 该属性会得到一个类数组对象集合 */

var form = document.forms;

console.log( form );// 显示 HTMLCollection(2) - 类数组对象

document.表单名称

通过表单名称会获取到指定名称的表单元素

新版本浏览器可能不支持

var formName = document.biaodan;

console.log( formName );// 显示

...

获取表单组件元素

HTMLFormElement.elements属性

通过HTMLFormElement对象提供的elements属性来获取指定表单中的所有组件

/* 获取表单元素 */

var form = document.forms[0];

/* 通过HTMLFormElement对象提供的elements属性来获取指定表单中的所有组件 */

var zujian = form.elements;

console.log( zujian );// 显示 HTMLFormControlsCollection(2) - 类数组对象

文本内容的选择

select()方法

获取当前输入框中所选择的文本内容

默认为全选

/* 定位指定元素 */

var input = document.getElementById( 'input' );

/* 为指定表单组件绑定获取焦点事件 */

input.addEventListener( 'focus', function () {

/* select()方法 - 选择当前输入框中所选择的文本内容(默认为全选) */

input.select();

} );

select事件

只要选择文本内容就会触发select()方法

selectionStart()方法

选择文本内容开始的位置(索引值)

selectionEnd()方法

选择文本内容结束的位置(索引值)

/* 定位指定元素 */

var input = document.getElementById( 'input' );

/*

select事件

* 只要选择文本内容就会触发select()方法

* selectionStart - 选择文本内容开始的位置(索引值)

* selectionEnd - 选择文本内容结束的位置(索引值)

*/

input.addEventListener( 'select', function () {

console.log( input.selectionStart, input.selectionEnd );// 显示 对应文本内容的索引值

/* 获取输入框中的文本内容 */

var wenben = input.getAttribute( 'value' );

/* 通过截串的方式获取到用户选取的文本内容 */

var neirong = wenben.substring( input.selectionStart,input.selectionEnd );

console.log( neirong );

} );

设置文本内容

setSelectionRange()方法

设置选择的文本内容

如果焦点在文本内容的最后面会全选文本内容

如果焦点在文本内容中的任意位置(不是最后)会选中设置文本内容

/* 定位指定表单元素 */

var form = document.forms[0];

/* 获取指定表单中的组件 */

var zujian = form.elements[0];

/* 为指定表单组件绑定获取焦点事件 */

zujian.addEventListener( 'focus', function(){

/*

setSelectionRange()方法

* 设置选择的文本内容

* 如果焦点在文本内容的最后面会全选文本内容

* 如果焦点在文本内容中的任意位置(不是最后)会选中设置文本内容

*/

zujian.setSelectionRange( 1, 5 );

} );

下拉列表操作

HTMLSelectElement对象

length属性

获取当前元素的个数

options属性

获取当前所有元素(类数组集合)

selectedIndex属性

显示当前被选中的列表项的索引值

怪物猎人

天涯明月刀

使命召唤

/* 定位指定表单组件 */

var game = document.getElementById( 'game' );

console.log( game.length );// 显示 3(列表项个数)

console.log( game.options );// 显示 HTMLOptionsCollection(3)(类数组对象集合)

console.log( game.selectedIndex );// 显示 0(选中项的索引值)

HTMLOptionElement对象

index属性

获取当前列表项的索引值

selected属性

判断当前列表项是否被选中

text属性

获取当前列表项的文本内容

value属性

当前列表项的value属性值

怪物猎人

天涯明月刀

使命召唤

/* 定位指定表单组件 */

var lieren = document.getElementById( 'lr' );

console.log( lieren.index );// 显示 0(当前列表项的索引值)

console.log( lieren.selected );// 显示 true(当前列表项是否被选中)

console.log( lieren.text );// 显示 怪物猎人(当前列表项的文本内容)

console.log( lieren.value );// 显示 lr(当前列表项的value属性值)

提交表单

submit事件

表单在进行提交时会触发submit事件

该事件会在表单被提交之前,实现对表单的验证

var form = document.forms[0];

form.addEventListener('submit',function(event){

// 实现表单验证

var kuang = document.getElementById('kuang');

var kuangValue = kuang.value;

if (kuangValue === '' || kuangValue === undefined || kuangValue === null) {

console.log('xxxxxx');

// 阻止默认行为

event.preventDefault();

}

});

submit()方法

该方法可用于提交表单

可以使用任何一个按钮进行表单提交(不需要提交按钮)

var btn = document.getElementById('btn');

btn.addEventListener('click',function(){

var form = document.forms[0];

form.submit();

});