在HTML中,有两种方式来表现文本框:
一种是使用input元素的单行文本,另一种是使用textarea的多行文本框。
使用input方式,必须添加type,设置为“text”。
- size特性,可以指定文本框内能够显示的字符数。
- value属性可以设置文本框的初始值。
- maxlength特性则是用于指定文本框内可以接受的最大字符数。
textarea的初始值则必须放在开始和结束标签之内。
- cols是文本框字符行数;
- rows是文本框字符列数;
另外,不能在HTML中给textarea指定最大字符数;
一、选择文本
上述两种文本框都支持
- 方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。
- 方法对应的select事件,在选择了文本框中的文本时事件触发。
1、select()方法
下面的代码是只要文本框获得焦点,就会选择全部的文本:
rush:js;">
var text
Box = document.getElementById("myForm").elements["f
irstName"];
//设置
默认值
text
Box.value = "input your f
irstName";
//设置事件
text
Box.addEventListener("focus",function () {
event.target.select();
});
2、select事件
何时触发该事件:
- 一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件;
- IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件;
- 在调用select()方法时也会触发;
如:
rush:js;">
var text
Box = document.getElementById("myForm").elements["f
irstName"];
//设置
默认值
text
Box.value = "input your f
irstName";
//设置事件
text
Box.addEventListener("select",function () {
console.log("selected");
});
3、取得选择的文本
利用两个属性:
- selectionStart
- selectionEnd
这两个属性保存的是基于0的数值,表示所选择文本的范围(偏移量)。因此要取得用户选择的文本框中的文本,可以使用如下代码:
rush:js;">
var text
Box = document.getElementById("myForm").elements["f
irstName"];
//设置
默认值
text
Box.value = "input your f
irstName";
//设置事件
text
Box.addEventListener("select",function () {
var selected = text
Box.value.substring(text
Box.selectionStart,text
Box.selectionEnd);
console.log(selected);
});
另外,也可以用该属性来设置当获得焦点的时候默认全选的状态:
rush:js;">
text
Box.addEventListener("focus",function () {
text
Box.selectionStart = "0";
text
Box.selectionEnd = text
Box.value.length;
});
或者:
rush:js;">
text
Box.addEventListener("focus",function () {
text
Box.blur();
});
但是,使用selectionStart/End属性时,IE8不支持,但支持另一个名为
获取选择的文本的兼容版本为:
rush:js;">
function getSelectedText (text
Box) {
if (typeof text
Box.selectionStart == "number") {
return text
Box.value.substring(text
Box.selectionStart,text
Box.selectionEnd);
}else if (document.selection) {
return document.selection.crea
terange().text;
}
}
二、选择部分文本
选择部分文本的方法是:
setSelectionRange()方法。接收两个参数:要选择第一个字符的索引和最后一个字符的索引。
如阻止用户选择:
rush:js;">
text
Box.addEventListener("focus",function () {
text
Box.setSelectionRange(0,0);
});
text
Box.addEventListener("select",0);
});
要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题:
rush:js;">
var range = text
Box.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Ch
aracter",0);
range.moveEnd("Ch
aracter",text
Box.value.length);
range.select();
兼容版本:比较常用
rush:js;">
function selectText(text
Box,startIndex,stopIndex) {
if (text
Box.setSelectionRange) {
text
Box.setSelectionRange(startIndex,stopIndex);
} else if (text
Box.createTextRange()) {
var range = text
Box.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Ch
aracter",startIndex);
range.moveEnd("Ch
aracter",stopIndex);
range.select();
};
}
三、过滤输入
1、屏蔽字符
下面的代码仅允许输入数字:
rush:js;">
var text
Box = document.getElementById("myForm").elements["f
irstName"];
text
Box.autofocus = true;
text
Box.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:在发生黏贴操作时触发
如设置禁止拷贝:
rush:js;">
//拷贝之前
提示禁止拷贝
text
Box.addEventListener("before
copy",function() {
text
Box.value = "do not
copy";
});
//拷贝时
禁止拷贝
text
Box.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:
rush:js;">
function getClipboardText(event) {
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
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:
rush:xhtml;">
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();
}
}
};
}
}
rush:js;">
var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");
除了“email”和“URL”,HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值:“number”,“range”,“datetime”,“datetime-local”,“date”,“mouth”,“week”,“time”。目前浏览器对这些类型支持并不好,如果真想使用的话要小心。
rush:js;">
var isPatternSupported="pattern" in document.createElement("input");