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接收客户端图片并保存,后台程序处 ...

随机推荐

2019-2020-1 20199324《Linux内核原理与分析》第三周作业
第二章操作系统是如何工作的一.知识点总结 1.计算机的三个法宝存储程序计算机函数调用堆栈机制.堆栈:是C语言程序运行时必须使用的记录函数调用路径和参数存储的空间. 中断 2.堆栈相关的寄存器和 ...
如何使用jQuery给asp.net的TextBox取值和赋值
解决办法: 可以在控件中先设置属性ClientInstandName的值和ID的值一样,再使用$("#ID").val("12345")
一个搜索框的小demo
一.实时按照输入的搜索值显示与其匹配的内容,隐藏其它内容 <%@ Page Language="C#" AutoEventWireup="true" Co ...
树分治（挑战p360）
poj1741 题:http://poj.org/problem?id=1741 #include<iostream> #include<algorithm> #include ...
Leetcode 5039. 移动石子直到连续
第134次周赛 5039. 移动石子直到连续 5039. 移动石子直到连续三枚石子放置在数轴上,位置分别为 a,b,c. 每一回合,我们假设这三枚石子当前分别位于位置 x, y, z 且 x < ...
ACG记录整理
资料来源日文维基百科 bangumi番组计划中文维基百科百度百科豆瓣电影资料类型テレビアニメ‎ OVA‎ アニメ映画‎ Webアニメ‎ 内容说明番名,带超链接介绍,尽量选用国内网站介绍, ...
kafka + spark Streaming + Tranquility Server发送数据到druid
花了很长时间尝试druid官网上说的Tranquility嵌入代码进行实时发送数据到druid,结果失败了,各种各样的原因造成了失败,现在还没有找到原因,在IDEA中可以跑起,放到线上就死活不行,有成 ...
[LC] 54. Spiral Matrix
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
MOOC（7）- case依赖、读取json配置文件进行多个接口请求-模拟接口响应数据（18）
这里是把传入的请求数据作为响应值返回 # -*- coding: utf-8 -*- # @Time : 2020/2/15 9:47 # @File : do_mock_18.py # @Autho ...
CF-1114C-Trailing Loves (or L'oeufs?)
题意: 输入n和m,求n!转换成m进制之后末尾有多少个0: 思路: 转换一下题意就可以看成,将n表示成x * (m ^ y),求y的最大值.^表示次方而不是异或: 这就比较好想了,将m分解质因数,对于 ...

【JavaScript】DOM之表单操作