广告合作QQ：76874919

JavaScript文本框脚本编写的注意事项

JavaScript 2019-01-04

在HTML中，有两种方式来表现文本框：

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

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

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

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

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

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

一、选择文本

上述两种文本框都支持

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

1、select()方法

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

Box = document.getElementById("myForm").elements["firstName"]; //设置默认值 textBox.value = "input your firstName"; //设置事件 textBox.addEventListener("focus",function () { event.target.select(); });

2、select事件

何时触发该事件：

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

如：

Box = document.getElementById("myForm").elements["firstName"]; //设置默认值 textBox.value = "input your firstName"; //设置事件 textBox.addEventListener("select",function () { console.log("selected"); });

3、取得选择的文本

利用两个属性：

  • selectionStart
  • selectionEnd

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

Box = document.getElementById("myForm").elements["firstName"]; //设置默认值 textBox.value = "input your firstName"; //设置事件 textBox.addEventListener("select",function () { var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd); console.log(selected); });

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

Box.addEventListener("focus",function () { textBox.selectionStart = "0"; textBox.selectionEnd = textBox.value.length; });

或者：

Box.addEventListener("focus",function () { textBox.blur(); });

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

  • 用户在整个文档范围内选择的文本信息

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

Box) { if (typeof textBox.selectionStart == "number") { return textBox.value.substring(textBox.selectionStart,textBox.selectionEnd); }else if (document.selection) { return document.selection.createRange().text; } }

二、选择部分文本

选择部分文本的方法是:

setSelectionRange()方法。接收两个参数：要选择第一个字符的索引和最后一个字符的索引。 如阻止用户选择：

Box.addEventListener("focus",function () { textBox.setSelectionRange(0,0); }); textBox.addEventListener("select",0); });

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

Box.createTextRange(); range.collapse(true); //范围折叠到开头 range.moveStart("Character",0); range.moveEnd("Character",textBox.value.length); range.select();

兼容版本：比较常用

Box,startIndex,stopIndex) { if (textBox.setSelectionRange) { textBox.setSelectionRange(startIndex,stopIndex); } else if (textBox.createTextRange()) { var range = textBox.createTextRange(); range.collapse(true); //范围折叠到开头 range.moveStart("Character",startIndex); range.moveEnd("Character",stopIndex); range.select(); }; }

三、过滤输入

1、屏蔽字符

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

Box = document.getElementById("myForm").elements["firstName"]; textBox.autofocus = true; textBox.addEventListener("keypress",function () { if (!/\d/.test(String.fromCharCode(event.charCode))) { //仅输入数字 event.preventDefault(); }; });

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

9 && !event.ctrlKey) { //仅输入数字 event.preventDefault(); }; });

四、操作剪贴板

以下是6个剪贴板事件

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

如设置禁止拷贝：

提示禁止拷贝 textBox.addEventListener("beforecopy",function() { textBox.value = "do not copy"; }); //拷贝时禁止拷贝 textBox.addEventListener("copy",function() { event.preventDefault(); });

要访问剪贴板中的数据，可以使用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：

function setClipboardText(event,value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain",value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text",value);
}
}

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

五、自动切换焦点

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

DOM:

js:

<div class="jb51code">
<pre class="brush:js;">
var textBox1 = document.getElementById("txtTel1");
var textBox2 = document.getElementById("txtTel2");
var textBox3 = document.getElementById("txtTel3");

textBox1.addEventListener("keyup",tabForward);
textBox2.addEventListener("keyup",tabForward);
textBox3.addEventListener("keyup",tabForward);

function tabForward() {
var target = event.target;
//当value长度等于最大值的时候
if (target.value.length == target.maxLength) {
var form = target.form;
//遍历所在的form表单中的元素
for (var i = 0,len = form.elements.length; i < len; i++) {
//如果该元素是目标元素
if (form.elements[i] == target) {
//并且该元素的下一个元素为true 其他条件
if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) {
//则下个元素获得焦点
form.elements[i + 1].focus();
}
}
};
}
}

六、HTML5约束验证API

1、必填字段required属性

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

requiredSupported="required" in document.createElement("input");

2、其他输入类型

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

3、数值范围

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

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

DOM:

required min="10" max="20" step="1">

js:

input.addEventListener("mousemove",function () {
var output = document.getElementById("output");
output.value = input.value;
});
up.addEventListener("click",function () {
//点击value值以2为单位增加
input.stepUp(2);
var output = document.getElementById("output");
output.value = input.value;
});

3、输入模式

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

var num = document.getElementById("number");
console.log(num.pattern); //\d{3}

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

4、检测有效性

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

var form = document.forms[0];
var name = document.getElementById("name");
var number = document.getElementById("num");
var check = document.getElementById("check");
var submit = document.getElementById("submit");

check.addEventListener("click",function () {
console.log(form.checkValidity()); //检测整个表单是否正确
if (form.checkValidity()) {
submit.removeAttribute("disabled");
check.disabled = true;
}else{
alert("请检查表单");
}
});

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

} else {
inputName.style.color = "white";
inputName.style.backgroundColor = "red";
if (inputName.validity.patternMismatch) {
inputName.value = "请填写正确的格式";
}
}
};
inputName.addEventListener("mouseenter",function () {
inputName.focus();
inputName.select();
});

validity主要包括下列属性：

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

5、禁用验证

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

在提交按钮上添加formnovalidate属性，会不验证提交表单。用js获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。 以上就是本文的全部内容，希望对大家的学习有所帮助。

JavaScript文本框脚本脚本脚本

相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图， ：视图模...
js实现横向跑马灯效果
首先我们需要一个html代码的框架如下： 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...