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】DOM之表单操作的更多相关文章

基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
JavaScript 小实例 - 表单输入内容检测，对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
javascript自动填写表单小技巧
javascript自动填写表单小技巧在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...
Django之form表单操作
小白必会三板斧 from django.shortcuts import render,HttpResponse,redirect HttpRespone:返回字符串 render:返回html页面 ...
python -使用Requests库完成Post表单操作
""" 使用Requests库完成Post表单操作 """ #_*_codingn:utf8 _*_ import requests fro ...
java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
JavaScript：基础表单验证
在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...
ExtJs 第二章，Ext.form.Basic表单操作
1.认识Ext.form.Panel表单面板 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...
【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理
最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

随机推荐

Linux基础篇四：常用命令
. 一个点表示是当前目录 .. 两个点表示当前目录的上一层目录 . 与 .. 相对路径的一种表现形式 cd ~/test/ ~当前用户的家目录绝对路径注意: ...
[LC] 373. Find K Pairs with Smallest Sums
You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...
linux文件系统与链接
Linux的文件属性图1 图1 linux的文件属性 ls -lhi -l 长格式 -h 人性化 -i inodo -d 看目录自己的信息 inode 源自于文件系统分区平面设计图格式化施 ...
ORs-2-Genome Coverage and the OR Subgenome
Genome Coverage and the OR Subgenome 因为: 爬行类动物的的gene numbers比较大,而birds 的 gene numbers 处于(182-688) 其中 ...
ibatis in语句参数传入方法
第一种:传入参数仅有数组 <select id="GetEmailList_Test" resultClass="EmailInfo_"& ...
[LC] 39. Combination Sum
Given a set of candidate numbers (candidates) (without duplicates) and a target number (target), fin ...
分布式消息队列Apache Pulsar
Pulsar简介 Apache Pulsar是一个企业级的分布式消息系统,最初由Yahoo开发并在2016年开源,目前正在Apache基金会下孵化.Plusar已经在Yahoo的生产环境使用了三年多, ...
poj 1659 Frog's Neighborhood
未名湖附近共有N个大小湖泊L1, L2, -, Ln(其中包括未名湖),每个湖泊Li里住着一只青蛙Fi(1 ≤ i ≤ N).如果湖泊Li和Lj之间有水路相连,则青蛙Fi和Fj互称为邻居.现在已知每只 ...
吴裕雄--天生自然 R语言开发学习：时间序列
#-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...
在中国实现自我价值的英国研究员——微软亚洲研究院英国籍研究员Darren的7年之路
"我和妻子在这儿已经待了7年了,这里的一切都很棒,无论是微软亚洲研究院还是北京."Darren笑着说,似乎他和中国,和北京,和研究院一直停留在"蜜月期",并未曾 ...

【JavaScript】DOM之表单操作