JavaScript表单
JavaScript表单
这篇文章的主要目的是介绍表单相关的知识,如表单基础知识、文本框脚本相关用法、选择框脚本相关用法以及等知识。虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是会禁用默认行为,然后使用Ajax方式通过POST请求异步提交表单数据。但是这并不代表form表单不重要了。form表单仍然是提交表单最快的方式,因为JavaScript提供了许多属性和方法让我们快速获取表单字段的值。所以,对form的理解和掌握还是很有必要的。
目录:JavaScript表单
- form表单
- 属性
- 方法
- 事件
- form表单字段(表单字段包括input, button, select, textarea, 以下属性方法事件为所有表单字段共有)
- 属性
- 方法
- 事件
- 文本框(input, textarea)
- 属性
- 实际应用
- 选择文本
- 过滤输入
- 自动切换焦点
- 选择框(select, option)
form表单
获取HTML中的Form标签可以通过id、class、name属性获取,或者直接通过form标签获取。当然,也可以使用document.forms
获取HTML中所有表单元素,会返回一个NodeList对象。
属性
说一个重要的
elements: document.forms[0].elements
返回类数组对象,包含该form表单下所有表单字段。可以通过表单字段的name属性或者索引访问.
let form = document.forms[0]
form.element[0] === form.element['index-0']
方法
在form表单上的方法有submit、reset方法。在现代web开发中,都会阻止form表单提交的默认行为。当没有参数时,可以在不点击按钮的情况下将所有表单字段的值向服务器提交数据。通常,存在以下三种按钮可以提交表单数据。
<input type="submit" value='提交' />
<button type='submit'>提交</button>
<input type="image" src='pic.png' />
事件
submit: 当给form表单绑定submit事件,在点击图像按钮或者type为submit的按钮会提交表单数据。此时可以通过事件对象阻止表单全局提交的默认行为。在提交表单时,为避免用户多次点击导致多次提交的问题,可以在提交后禁用提交按钮。
form表单字段
属性
都比较简单,有如下:
- name
- value
- form: 指向当前表单元素,只读。
- type
- readOnly
- disabled
- autofocus: 自动获得焦点。HTML5新增属性。
<input type="text" autofocus />
。支持此事件的浏览器包括IE10+、Chrome、Firefox。所以支持的浏览器的autofocus会返回true,不支持时会返回空字符串。
方法
focus()、blur():通常会结合blur方法使用。比如在DOMContentLoaded事件之后让某个input元素获得焦点,让用户可以直接输入。
document.addEventLitener('DOMContentLoaded', e => {
let input = docuemnt.querySelector('.input-1')
input.focus()
}, false)
事件
focus、blur事件:在实际业务中,可以结合使用focus和blur事件。如input节点获得焦点时,改变input元素颜色。在失去焦点时,将背景颜色重置。
let input = document.querySelector('.input-0')
input.addEventListener('focus', e => {
e.target.style.backgroundColor = '#ccc'
}, false)
input.addEventListener('blur', e => {
e.target.style.backgroundColor = '#fff'
}, false)
change事件:对于input和textarea元素,当它们从获得焦点到失去焦点并且value值发生改变时,才会触发change事件。而对于select元素,只要value值发生改变时就会触发change事件。换句话说,没有失去焦点也会触发change事件。这个细节需要注意。
文本框(input, textarea)
除了以上表单字段的共有属性和方法之外,文本框存在自己的一些属性和操作文本的一些方法。
属性
- maxlength: 最大输入长度
- size: 文本框中能够显示的字符数
- cols: textarea列数
- rows: textarea行数
- ······· 以下均为HTML5新增的约束验证API······
- reqiured: 必填选项。
- type
- email: 默认验证
- url: url模式
- number: 仅能输入数字
- pattern: 实际上就是在HTML里使用正则表达式。IE10+以上浏览器支持。
- checkValidity方法:在document.forms[0]上绑定此方法,可以检测整个form表单字段是否有效。如果有效,则返回true。否则返回false。
// type为number时,可以指定min,max,step(表示某个值得倍数)属性
<input type="number" min='0' max='100' step='5' name='count'>
// 此时正则默认添加了^, $,即以下正则等于'^\d+$'
<input type='text' pattern='\d+'>
实际应用
选择文本
1.select方法:input和textarea元素都支持selct方法。这个方法不接受任何参数,表示选择某个文本框元素的所有文本
// 当input元素获得焦点是选择文本
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
e.target.select()
}, false)
2.setSelectionRange方法:这个方法用于选择部分文本内容。接受两个参数,起始位置和结束位置。HTML5新增的方法。IE9+以上浏览器支持。
// 当input获得焦点时,选择文本中的第二个值
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
let target = e.target
console.log(target.setSelectionRange(1, 2))
}, false)
3.select事件:当文本框元素中的文本被选中时,就会触发select事件。只要选中文本就会触发,不需要全选。
4.selectionStart, selectionEnd属性:这两个属性用于或者用户选中的文本内容。因此,可以与select事件结合使用,获取用户选中的文本内容。HTML5新增的两个属性。IE9+以上浏览器支持。
let input = document.querySelector('.input-1')
input.addEventListener('select', e => {
let target = e.target
let start = target.selectionStart
let end = target.selectionEnd
console.log(target.value.slice(start, end))
}, false)
过滤输入
文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要input元素中只允许输入数字。这时候就需要用到文本的过滤。基本思路如下
1.通过监听keypress事件,判断输入时的字符是否是数字。通过charCode判断。keypress事件会在用户按下键盘上的【字符键】时触发。
2.如果不是,则取消默认行为,即取消文本的输入。
let input = document.querySelector('.input-1')
input.addEventListener('keypress', e => {
let charCode = e.charCode
if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
e.preventDefault()
}
}, false)
此方法通过charCode属性来判断用户输入的字符是否是数字字符,如果是则可以输入,如果不是则禁止输入。这里要注意的是,不能通过input的value属性来判断。因为keydown和keypress事件会在value改变之前触发,而keyup事件则是在value发生改变之后触发。因此,keypress获取value值是上一次的值,但是keypress事件可以获取到按下键盘时的charCode属性,然后通过String对象的fromCharCode转成对应的字符,根据此字符做一次正则验证即可。同时,charCode属性只有在keypress事件才存在,在keydown和keyup事件中都会返回0。
自动切换焦点
这种应用主要用于手机号码上。如手机号码可以分为'334'的结构。因此可以创建三个input,当输入完毕时自动切换焦点到下一个input上。
// 必须设置最大值
<input type="text" name='text1' maxlength="3">
<input type="text" name='text2' maxlength="3">
<input type="text" name='text3' maxlength="4">
// 当value的length等于maxleng时,发生跳转
function judge (len, max, target, form) {
if (len === max) {
let length = form.elements.length
for (let i = 0; i < length; i++) {
if (target === form.elements[i]) {
if (form.elements[i + 1]) {
form.elements[i + 1].focus()
}
}
}
}
}
// 给三个input绑定keyup事件,通过事件代理方式。
document.addEventListener('keyup', e => {
let target = e.target
let form = target.form
let len = target.value.length
let maxLen = target.maxLength
switch (target.name) {
case 'text1':
judge(len, maxLen, target, form)
break
case 'text2':
judge(len, maxLen, target, form)
break
case 'text3':
judge(len, maxLen, target, form)
break
}
}, false)
选择框(select, option)
选择框是通过select和option元素组合而成的。除了表单字段共有的属性和方法之外,在这两个元素上提供了其他的属性和方法。目的是为了更加方便的操作选择框元素。
select元素
- add(newOption, targetOption):在select元素上有add方法,向select元素插入新的option元素。传入两个参数:新的option元素和目标option元素。
- multiple属性: 是否允许多项选择。如果未添加此属性,则select元素的type属性为'select-one'。否则为'select-multiple'。
- options属性:取得该select元素下的所有options元素。返回一个类数组对象。
- selectedIndex属性: 选中options元素的索引值。
- size属性: 可见的行数
- value属性: 发送到服务器的值,如果没有这个属性,则会取innerText的值。
option元素
- index: 索引值
- label: 当前选项的标签
- selected: 被选中的option元素
- text: 文本
- value: 发送到服务器的值
JavaScript表单的更多相关文章
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- JavaScript表单处理(上)
为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 发文不易,转载请亲注明出处,谢谢! 一.表单介绍 在HTML中,表单是由<form& ...
- JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 第一百二十二节,JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript 表单验证入门
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
随机推荐
- zend studio修改字体
zend studio修改字体 没想到zend studio 9中对中文显示不太好看,似乎有点小了.修改如下:打开Window->Preferences->General->Appe ...
- [leetcode-547-Friend Circles]
There are N students in a class. Some of them are friends, while some are not. Their friendship is t ...
- JS初步学习
[使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): <button onclick="javascript:alert('小碧池!你真点啊!')">有本 ...
- mybatis存取blob对象+@Cacheable实现数据缓存
参考文档: http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ 需求场景: 当前业务通过第三方接口查询一个业务数据, ...
- QC使用:
qc使用入门 qc使用安装篇:附链接http://www.cnblogs.com/alterhu/archive/2011/11/05/2237483.html qc使用配置篇:附链接http://w ...
- 孤儿文档是怎样产生的(MongoDB orphaned document)
使用MongoDB的开发人员应该都听说过孤儿文档(orphaned document)这回事儿,可谓闻着沉默,遇者流泪.本文基于MongoDB3.0来看看怎么产生一个orphaned document ...
- Apple使用Apache Mesos重建Siri后端服务
苹果公司宣布,将使用开源的集群管理软件Apache Mesos,作为该公司广受欢迎的.基于iOS的智能个人助理软件Siri的后端服务.Mesosphere的博客指出,苹果已经创建了一个命名为J.A.R ...
- MySQL · 引擎特性 · InnoDB奔溃恢复
前言 数据库系统与文件系统最大的区别在于数据库能保证操作的原子性,一个操作要么不做要么都做,即使在数据库宕机的情况下,也不会出现操作一半的情况,这个就需要数据库的日志和一套完善的奔溃恢复机制来保证.本 ...
- Luogu 3402 最长公共子序列(二分,最长递增子序列)
Luogu 3402 最长公共子序列(二分,最长递增子序列) Description 经过长时间的摸索和练习,DJL终于学会了怎么求LCS.Johann感觉DJL孺子可教,就给他布置了一个课后作业: ...
- 51nod_1100:斜率最大
题目链接 斜率最大点对横坐标必相邻 #include <bits/stdc++.h> using namespace std; ; struct point { int x, y, pos ...