首页 / JAVASCRIPT / javascript中DOM的表单操作（附代码）

javascript中DOM的表单操作（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript中DOM的表单操作（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5031字，纯文字阅读大概需要8分钟。

内容图文

DOM中的表单可以进行什么样的操作，操作的方法是什么？本篇文章就分享给大家javascript中DOM的表单操作，内容很详细，一起来看看吧。

1、获取表单

获取表单元素

以Document对象中forms属性来获取当前HTML页面所有表单集合
以Document对象中表单的name属性值来获取表单元元素

<body>
<form action="#">
    <input type="submit">
</form>
<form name="mylove" action="#">
    <input type="submit">
</form>
<script>
    console.log(document.forms);
//    获取当前HTML页面所有表单元素
    console.log(document.mylove);
//    document表单名称-有些新浏览器是不支持
</script>
</body>

获取表单组件元素

以HTMLFormElement对象的elements属性来获取表单组件的集合

<body>
<form action="#">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    console.log(form.elements);
</script>
</body>

2、表单操作

文本内容的选择

以HTMLElement对象和HTMLTextAreaElement对象中select()方法来获取文本框所有文本框的内容

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

设置文本内容

在HTML5新增中setSelectionRange()方法，来获取一个焦点文本框的文本内容

body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

操作剪切板

以copy；cut，paste 来设置 操作剪切板的复制，剪切和粘贴

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <input type="text" id="username1">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('copy',function (event) {
        var data = event.clipboardData || window.clipboardData;
        console.log(data);
        console.log('这是复制操作');
        var value = username.value;
        var result = value.substring(selectionStart,username.selectionEnd);
        console.log(result);
        data.setData('text',result);
    });
    username.addEventListener('cut',function () {
        console.log('这是个剪切操作');
    });
    var username1 = document.getElementById('username1');
    username1.addEventListener('paste',function (event) {
        event.preventDefault();
        var data = event.clipboardData || window.clipboardData;
        var result = data.getData('text');
        /*得到DataTransfer对象
        * geData()方法-获取数据内容*/

        if (result === '用户名') {
            result ='***';
        }
        username1.value = result;
    })
</script>
</body>

下拉列表的操作

是以select和option对象来创建病提供一些属性和方法

<form action="#">
    <select id="yx">
        <option id="dj" value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
    <select id="cyx1" multiple size="5">
        <option value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
</form>
<script>

    var yx = document.getElementById('yx');
    // HTMLSelectElement对象
    console.log(yx.length);
    console.log(yx.options);
    console.log(yx.selectedIndex);// 被选中<option>的索引值
    // 属性
    var yx1 = document.getElementById('yx1');
    // size属性默认值是 0
    console.log(yx1.size);

    console.log(yx1.item(1));
    yx1.remove(2);

    var dj = document.getElementById('dj');
    console.log(dj.index);
    console.log(dj.selected);
    console.log(dj.text);
    console.log(dj.value);

</script>

3、表单验证

以checkValidity()如元素值不存在验证问题，会是true，如不是则返回false
以setCustomValidity（message）会为元素自定义个错误信息，如果设置了，该元素未无效，并显示

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('blur',function () {
        var value = username.value;
        if (value === '' || value === undefined || vaiue === null) {
            console.log('请输入你用户名');
        }
    });
</script>
</body>

4.表单提交

submit事件

以submit表示提交表单

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('该表单已被提交');
    });
</script>
</body>

submit(）方法

以submit表示提交表单，并用使用任意普通按钮即可完成提交

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

相关推荐：

JavaScript和jQuery的DOM操作

JavaScript DOM的本质及操作方法

以上就是javascript中DOM的表单操作（附代码）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的javascript中DOM的表单操作（附代码）全部内容，希望文章能够帮你解决javascript中DOM的表单操作（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284999.html

来源：【匿名】