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

随机推荐

HttpClient怎么获取cookie
// 旧版 HttpClient httpClient = new DefaultHttpClient(); // execute get/post/put or whatever httpClien ...
C#面向对象---对象成员、方法加载、引用类库
一.方法重载: 1.两个函数同名,就互相构成方法的重载关系 2.重载的函数,必须跟其他函数之间具有不同的参数类型或参数个数二.字段与属性类的字段: 类里面是可以直接定义变量的,这些变量就叫类的字段 ...
php启动后netstat看不到9000端口的问题
https://www.cnblogs.com/jonsea/p/5522018.html php-fpm配置文件详解其实就是PHP配置文件改一个参数 listen = 127.0.0.1: ...
JavaScript 简介与语法
一.JavaScript简介 ).head里面 ).body里面 (在body内最为严谨) ).</html>之后 //程序上来要执行的部分 [2]三个常用对话框 alert()警告对话框 ...
Differential Calculus
Taylor's Formula Theorem 1.1. Let \(f\): \(I=(c,d)->\mathbb{R}\) be a n-times differentiable func ...
用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒
Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...
蓝桥杯-PREV28-地宫取宝
先自己用dp解了一遍,然后看了官方讲解视频是用记忆化搜索做的.感觉那位老师的方法比较容易实现(效率上和我的差不多的):记录一下三种方法. 动态规划地宫取宝 1.195KB C++ 正确 100 15 ...
SpringBoot连接Oracle报错，找不到驱动类，application.properties文件中驱动类路径为红色
pom.xml文件:  <dependency> <groupId>com.oracle</groupId> & ...
LeetCode Day 4
LeetCode0011 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...
java枚举与常量类的区别
1)枚举型可以直接与数据库打交道,我通常使用varchar类型存储,对应的是枚举的常量名.(数据库中好像也有枚举类型,不过也没用过) 2) switch语句支持枚举型,当switch使用int.Str ...

【JavaScript】DOM之表单操作