本文对表单中的文本框脚本稍作整理,希望对大家有帮助。
在HTML中文本框有两种写法:
1.input元素的单行文本,
2.textarea的多行文本框。
使用input方式,必须添加type,设置为“text”。
- size特性,可以指定文本框内能够显示的字符数。
- value属性可以设置文本框的初始值。
- maxlength特性则是用于指定文本框内可以接受的最大字符数。
textarea的初始值则必须放在开始和结束标签之内。 - cols是文本框字符行数;
- rows是文本框字符列数;
用户输入的内容都保存在value中,最好不要用DOM处理value。
1.选择文本
上述两种文本框都支持select()方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。
与这个方法对应的select事件,在选择了文本框中的文本时事件触发。
1.1 select()方法
下面的代码是只要文本框获得焦点,就会选择全部的文本:
var textBox = document.getElementById("myForm").elements["textbox1"];
textBox.addEventListener("focus", function () {
event.target.select();
});
1.2 select事件
何时触发该事件:
- 一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件;
- IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件;
- 在调用select()方法时也会触发;
如:
var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.addEventListener("select", function () {
console.log("selected");
});
1.3 取得选择的文本
利用两个属性:
- selectionStart
- selectionEnd
这两个属性保存的是基于0的数值,表示所选择文本的范围(偏移量)。
使用substring()方法。
因此要取得用户选择的文本框中的文本,可以使用如下代码:
textBox.addEventListener("select", function () {
var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
console.log(selected);
});
另外,也可以用该属性来设置当获得焦点的时候默认全选的状态:
textBox.addEventListener("focus", function () {
textBox.selectionStart = "0";
textBox.selectionEnd = textBox.value.length;
});
或者:
textBox.addEventListener("focus", function () {
textBox.blur();
});
但是,使用selectionStart/End属性时,IE8不支持,但支持另一个名为
document.selection对象,该对象保存着用户在整个文档范围内选择的文本信息
获取选择的文本的兼容版本为:
function getSelectedText (textbox) {
if (typeof textbox.selectionStart == "number") {
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}else if (document.selection) {
return document.selection.createRange().text;
}
}
//调用document.selection时,不需要考虑textbox参数。
1.4 选择部分文本
选择部分文本的方法是:
setSelectionRange()方法。
接收两个参数:要选择第一个字符的索引和最后一个字符的索引。
如阻止用户选择:
textBox.addEventListener("focus", function () {
textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
textBox.setSelectionRange(0,0);
});
要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题:
var range = textBox.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();
兼容版本:比较常用
function selectText(textbox, 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();
};
}
2. 过滤输入
2.1 屏蔽字符
要点:利用正则表达式作为判断条件,根据keypress事件中的charCode、keyCode判断键入的参数。
只能输入数字:
secret.addEventListener("keypress", function(event){
var charCode = event.keyCode;
console.log(charCode);
if(!/\d/.test(String.fromCharCode(charCode)) && charCode>9 && !event.ctrlKey){
event.preventDefault();
}
},false);
2.2 操作剪贴板
剪贴板事件:
beforecopy
copy
beforecut
cut
beforepaste
paste
访问剪贴版数据:clipboardData对象。
方法:
getData(数据类型),
setData(数据类型,要放进去的文本),
clearData()。
3. 自动切换焦点
JS自动切换焦点
4. HTML5约束验证API
1.必填字段required
2.其他类型输入:email,url
3.数值范围:number、min、max、step
4.输入模式:pattern
5.检测有效性:checkValidity()
6.禁止验证:novalidate