JavaScript 之 DOM [ 表单操作 ]

头像
蔡志远
    阅读 5 分钟

    表单操作

    获取表单元素

    • 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()方法

      • selectionStart()方法

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

      • 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属性

      • 获取当前所有<option>元素(类数组集合)

    • selectedIndex属性

      • 显示当前被选中的列表项的索引值
    <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属性

      • 获取当前列表项的索引值

    • 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>
    javascript
    蔡志远
    9 声望5 粉丝
    « 上一篇
    JavaScript 之 DOM [ 事件 ]
    下一篇 »
    JavaScript 之 BOM

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.4k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新