JavaScript 表单脚本——“文本框脚本”的注意要点

  • A+
所属分类:JavaScript

在HTML中,有两种方式来表现文本框:

一种是使用input元素的单行文本,另一种是使用textarea的多行文本框。

使用input方式,必须添加type,设置为“text”。

  • size特性,可以指定文本框内能够显示的字符数。
  • value属性可以设置文本框的初始值。
  • maxlength特性则是用于指定文本框内可以接受的最大字符数。

textarea的初始值则必须放在开始和结束标签之内。

  • cols是文本框字符行数;
  • rows是文本框字符列数;

另外,不能在HTML中给textarea指定最大字符数;

选择文本

上述两种文本框都支持

  • select()方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。
  • 与这个方法对应的select事件,在选择了文本框中的文本时事件触发。

select()方法

下面的代码是只要文本框获得焦点,就会选择全部的文本:

select事件

何时触发该事件:

  • 一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件;
  • IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件;
  • 在调用select()方法时也会触发;

如:

取得选择的文本

利用两个属性:

  • selectionStart
  • selectionEnd

这两个属性保存的是基于0的数值,表示所选择文本的范围(偏移量)。因此要取得用户选择的文本框中的文本,可以使用如下代码:

另外,也可以用该属性来设置当获得焦点的时候默认全选的状态:

或者:

但是,使用selectionStart/End属性时,IE8不支持,但支持另一个名为

  • document.selection对象,该对象保存着用户在整个文档范围内选择的文本信息

获取选择的文本的兼容版本为:

选择部分文本

选择部分文本的方法是:

  • setSelectionRange()方法。接收两个参数:要选择第一个字符的索引和最后一个字符的索引。

如阻止用户选择:

要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题:

兼容版本:比较常用

过滤输入

屏蔽字符

下面的代码仅允许输入数字:

但是部分浏览器会对向上、下键、退格键触发keypress事件,所以需要对这些常用的操作键取消禁止,只要不屏蔽那些字符编码小于10的键即可:

操作剪贴板

以下是6个剪贴板事件

  • beforecopy:在发生复制操作前触发
  • copy:在发生复制时触发
  • beforecut:在发生剪贴前操作
  • cut:在发生加贴时操作
  • beforepaste:在发生黏贴操作前触发
  • paste:在发生黏贴操作时触发

如设置禁止拷贝:

要访问剪贴板中的数据,可以使用clipboardData对象,在IE中,这个对象是window对象的属性,在friefox,safari和chrome,这个对象是相应event对象的属性;在IE中可以随时访问该对象;但在其他浏览器中只有在处理剪贴板事件期间才有效。

这个clipboardData对象有三个方法:

  • getData()
  • setData()
  • clearData()

getData()接收一个参数,即要取得数据的格式(IE中有两种数据格式:text和URL;在其他浏览器中这个参数是一种MIME类型;不过可以用text代替text/plain)。

setData()接收两个参数,即数据类型和要放在剪贴板中的文本。(第一个参数中,IE支持text和URL;第二个参数中chrome和safari不支持text类型);这两个浏览器在成功将文本放到剪贴板中后,都会返回true;否则,返回false:

目前浏览器逐渐收紧对访问剪贴板的操作。

自动切换焦点

理论上就是在前一个文本框中的字符打到最大数量后,自动将焦点切换到下一个文本框:

DOM:

js:

HTML5约束验证API

必填字段required属性

在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性:

其他输入类型

input的type属性增加了“email”和“url”;各浏览器也都为它们增加了定制的验证机制:

数值范围

除了"email"和"URL",HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值:"number","range","datetime","datetime-local","date","mouth","week","time"。目前浏览器对这些类型支持并不好,如果真想使用的话要小心。

对这事数值类型的输入元素可以指定min属性,max属性,step属性。同时这些数值类型元素还有两个方法:stepUp(),stepDown()。都接受一个参数,要在当前基础上加上或减去的数值。

DOM:

js:

输入模式

HTML5新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值。

可以使用以下代码来检测浏览器是否支持pattern属性:

检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法,如果检查有效返回true。

input的validity属性会给出什么字段有效和无效的具体信息。

validity主要包括下列属性:

  • customError:是否设置了setCustomValidity();
  • patternMismatch:是否与pattern属性匹配;
  • rangeOverflow:是否比max值大;
  • rangeUnderflow:是否比min值小;
  • stepMisMatch:步长是否合理;
  • tooLong:是否超过了maxlength;
  • typeMismatch:是否不是mail类型和url类型;
  • valid:如果这里的其他属性都是false,返回true;
  • valueMissing:如果为required中没有值,返回true。

禁用验证

通过设置表单的novalidate属性,可以是表单不进行验证。用js获取form之后,设置它的novalidate属性为true,会禁用表单验证。

在提交按钮上添加formnovalidate属性,会不验证提交表单。用js获取submit按钮之后,设置它的formnovalidata属性为true,会禁用表单验证并提交。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: