【JavaScript】DOM之表单操作
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之表单操作的更多相关文章
- 基于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接收客户端图片并保存,后台程序处 ...
随机推荐
- rework-发出你的心声
生意人虚张声势的时候会给人什么感觉?都是些僵硬的措辞.官方的腔调.虚伪的友善.法律术语等.你一定看过这些玩意儿,就好像是机器人写出来的东西,这些公司在向你发话,而不是和你对话. 这种专业主义面具让人觉 ...
- ionic3 打开相机与相册,并实现图片上传
安装依赖项等: $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera 创 ...
- java面试和笔试大全
2.String是最基本的数据类型吗? 基本数据类型包括byte.int.char.long.float.double.boolean和short. java.lang.String类是final类型 ...
- K - The Unique MST (最小生成树的唯一性)
Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...
- PAT甲级——1011 World Cup Betting
PATA1011 World Cup Betting With the 2010 FIFA World Cup running, football fans the world over were b ...
- linux打开和关闭端口
查看哪些端口被打开 netstat -anp 关闭端口号:iptables -A INPUT -p tcp -drop 8080 -j DROP 打开端口号:iptables -A INPUT -p ...
- 74)PHP,Session的一些属性
(1) (2)有效期在 会话周期结束(就是将浏览器关闭前) (3)有效路径: 整站都有效 (4)有效域:当前域 (5)是否安全传输:否 (6)以上的session数据的特征都是由一个问题导致的,就 ...
- Qt 编译出现 error LNK2019: 无法解析的外部符号
编辑完成后执行"构建->执行qmake",完成(必须要执行qmake).
- sqlserver 命令执行sql脚本
osql -S 主机名 -U 用户名 -P 密码 -i E:\20190723.sql
- perf4j+spring+aop 配置 注解方式
今天将perf4j基于spring aop方式进入了接入,接入方法还是比较简单.具体配置如下: logback.xml <!--perf4j配置--> <appender name= ...