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

随机推荐

POJ-3264 Balanced Lineup（区间最值，线段树，RMQ）
http://poj.org/problem?id=3264 Time Limit: 5000MS Memory Limit: 65536K Description For the daily ...
rest framework-版本-长期维护
############### 版本 ############### # # 版本的问题: # rest_framework.versioning.URLPathVersioning # 一般就 ...
JS如何按时间粒度获取date的时间差
获取date类型 var type = _xAxis[0].split(/-|:|\s/).length; 按时间粒度获取date的时间差 function getDateDiffByType(new ...
BigDecimal不整除的一个异常java.lang.ArithmeticException
转载地址:http://blog.csdn.net/jobjava/article/details/6764623 金额的数据类型是BigDecimal 通过BigDecimal的divide方法进行 ...
iOS 中UIWebView的cookie
有关cookie是什么,大家可以自行百度,本文我获得cookie的目的是得到一个userID. 下面的是代码. - (void)getUserIDFromCookie { NSHTTPCookieSt ...
python数据类型：列表List和Set
python数据类型:列表List, Set集合序列是Python中最基本的数据结构序列中每个元素都分配一个数字,表示索引列表的数据项不需要具有相同的类型列表中的值可以重复并且有 ...
如何消除img间的默认间隙
方案一:div{font-size:0};方案二:img{ display:block};方案三:img{vertical-align:top;}方案四:div{ margin-bottom:-3px ...
关于使用css变量实现主题的切换效果
现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现 HTML 在HTML的body标签上先定义一个id元素属性 <body id="sm-theme"> ...
Java Random函数
Java中存在着两种Random函数: 1.java.lang.Math.Random: 调用这个Math.Random()函数能够返回带正号的double值,该值大于等于0.0且小于1.0,即取值范 ...
MyBatis之pageHelper分页插件
1.先导入Maven,jar包依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifa ...

【JavaScript】DOM之表单操作