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

  1. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  2. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  3. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  4. Django之form表单操作

    小白必会三板斧 from django.shortcuts import render,HttpResponse,redirect HttpRespone:返回字符串 render:返回html页面 ...

  5. python -使用Requests库完成Post表单操作

    """ 使用Requests库完成Post表单操作 """ #_*_codingn:utf8 _*_ import requests fro ...

  6. java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  7. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  8. ExtJs 第二章，Ext.form.Basic表单操作

    1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...

  9. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

随机推荐

  1. 吴裕雄--天生自然C语言开发：函数

    return_type function_name( parameter list ) { body of the function } /* 函数返回两个数中较大的那个数 */ int max(in ...

  2. RDD(四)——transformation_key_value类型

    这里所有算子均只适用于pairRDD.pairRDD的数据类型是(k,v)形式的键值对: PartitionBy(Partitioner) 对pairRDD进行分区操作,如果原有的partioner和 ...

  3. [LC] 513. Find Bottom Left Tree Value

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  4. C++语言堆栈的详细讲解

    本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...

  5. Python爬虫带用户名密码登录

    # -*- coding: utf-8 -*- """ Created on Wed Jun 6 13:18:58 2018 @author: Lenovo " ...

  6. Linux下rabitMq的部署（源码安装）

    简版yum安装:https://www.jianshu.com/p/46c22834aad5 一.环境安装 1,安装预环境 通过yum安装以下组件,运行命令: [root@rabbitmqserver ...

  7. iOS UITableView Tips(2)

    #TableView Tips(2) (本来想一章就结束TableView Tips,但是发现自己还是太天真了~too young,too simple) ##架构上的优化 在Tips(1)中指出了一 ...

  8. 吴裕雄--天生自然python学习笔记：Python3 JSON 数据解析

    JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. Python3 中可以使用 json 模块来对 JSON 数据进 ...

  9. DB2数据库多行一列转换成 一行一列

    在db2中遇到多行一列转为一行一列的需求时,用db2函数 LISTAGG可以实现该功能.语法如下: SELECT   [分组的字段 ] , LISTAGG([需要聚合的字段名], ',')   FRO ...

  10. VisionPro连接Dalsa线扫相机

    1 环境配置 硬件:编码器(提供编码信号的PLC) 线扫相机 镜头 相机线缆 图像采集卡(Dalsa_Xcelera-CL_PX4 Dual) 软件:VisionPro 8.2 VisionPro软件 ...