JavaScript 之 DOM [ 表单操做 ]

时间 2019-12-05

原文原文链接

表单操做

获取表单元素

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

document.forms

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

<body>
<form action="#">
    <input type="text">
</form>
<form action="#" name="biaodan">
    <input type="text">
</form>
<script>
    /* 该属性会获得一个类数组对象集合 */
    var form = document.forms;
    console.log( form );// 显示 HTMLCollection(2) - 类数组对象
</script>
</body>

document.表单名称

经过表单名称会获取到指定名称的表单元素数组
- 新版本浏览器可能不支持

<body>
<form action="#">
    <input type="text">
</form>
<form action="#" name="biaodan">
    <input type="text">
</form>
<script>
    var formName = document.biaodan;
    console.log( formName );// 显示 <form action="#" name="biaodan">...</form>
</script>
</body>

获取表单组件元素

HTMLFormElement.elements属性

经过HTMLFormElement对象提供的elements属性来获取指定表单中的全部组件

<body>
<form action="#">
    <input type="text" name="biaodan">
    <input type="submit">
</form>
<script>
    /* 获取表单元素 */
    var form = document.forms[0];
    /* 经过HTMLFormElement对象提供的elements属性来获取指定表单中的全部组件 */
    var zujian = form.elements;
    console.log( zujian );// 显示 HTMLFormControlsCollection(2) - 类数组对象
</script>
</body>

文本内容的选择

select()方法

获取当前输入框中所选择的文本内容浏览器
- 默认为全选

<body>
<form action="#">
    <input type="text" id="input" value="请输入你的帐号">
    <input type="submit">
</form>
<script>
    /* 定位指定元素 */
    var input = document.getElementById( 'input' );
    /* 为指定表单组件绑定获取焦点事件 */
    input.addEventListener( 'focus', function () {
        /* select()方法 - 选择当前输入框中所选择的文本内容(默认为全选) */
        input.select();
    } );
</script>
</body>

select事件

只要选择文本内容就会触发select()方法code
- selectionStart()方法orm
  - 选择文本内容开始的位置(索引值)
- selectionEnd()方法对象
  - 选择文本内容结束的位置(索引值)

<body>
<form action="#">
    <input type="text" id="input" value="请输入你的帐号">
    <input type="submit">
</form>
<script>
    /* 定位指定元素 */
    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 );
    } );
</script>
</body>

设置文本内容

setSelectionRange()方法

设置选择的文本内容索引
- 若是焦点在文本内容的最后面会全选文本内容
- 若是焦点在文本内容中的任意位置(不是最后)会选中设置文本内容

<body>
<form action="#">
    <input type="text" id="input" value="请输入你的帐号">
    <input type="submit">
</form>
<script>
    /* 定位指定表单元素 */
    var form = document.forms[0];
    /* 获取指定表单中的组件 */
    var zujian = form.elements[0];
    /* 为指定表单组件绑定获取焦点事件 */
    zujian.addEventListener( 'focus', function(){
        /*
            setSelectionRange()方法
             * 设置选择的文本内容
              * 若是焦点在文本内容的最后面会全选文本内容
              * 若是焦点在文本内容中的任意位置(不是最后)会选中设置文本内容
         */
        zujian.setSelectionRange( 1, 5 );
    } );
</script>
</body>

下拉列表操做

HTMLSelectElement对象

length属性事件
- 获取当前<option>元素的个数
options属性ip
- 获取当前全部<option>元素(类数组集合)
selectedIndex属性element
- 显示当前被选中的列表项的索引值

<body>
<form action="#">
    <select id="game">
        <option id="lr" value="lr">怪物猎人</option>
        <option value="td">天涯明月刀</option>
        <option value="sm">使命召唤</option>
    </select>
</form>
<script>
    /* 定位指定表单组件 */
    var game = document.getElementById( 'game' );
    console.log( game.length );// 显示 3(列表项个数)
    console.log( game.options );// 显示 HTMLOptionsCollection(3)(类数组对象集合)
    console.log( game.selectedIndex );// 显示 0(选中项的索引值)
</script>
</body>

HTMLOptionElement对象

index属性get
- 获取当前列表项的索引值
selected属性
- 判断当前列表项是否被选中
text属性
- 获取当前列表项的文本内容
value属性
- 当前列表项的value属性值

<body>
<form action="#">
    <select id="game">
        <option id="lr" value="lr">怪物猎人</option>
        <option value="td">天涯明月刀</option>
        <option value="sm">使命召唤</option>
    </select>
</form>
<script>
    /* 定位指定表单组件 */
    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属性值)
</script>
</body>

提交表单

submit事件

表单在进行提交时会触发submit事件
该事件会在表单被提交以前,实现对表单的验证

<body>
<form action="#">
    <input type="text" id="kuang">
    <input type="submit">
</form>
<script>
    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();
        }
    });
</script>
</body>

submit()方法

该方法可用于提交表单
- 能够使用任何一个按钮进行表单提交(不须要提交按钮)

<body>
<form action="#">
    <input type="text" id=kuang">
    <input id="btn" type="button" value="提交">
</form>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var form = document.forms[0];
        form.submit();
    });
</script>
</body>