表单—文本框脚本
2017-07-23 本文已影响0人
阿r阿r
本文对表单中的文本框脚本稍作整理，希望对大家有帮助。
在HTML中文本框有两种写法:
1.input元素的单行文本，
2.textarea的多行文本框。
使用input方式，必须添加type，设置为“text”。
- size特性，可以指定文本框内能够显示的字符数。
- value属性可以设置文本框的初始值。
- maxlength特性则是用于指定文本框内可以接受的最大字符数。
<input type=”text” size=”25” maxlength=”50” value=”initial value”>
textarea的初始值则必须放在开始和结束标签之内。 - cols是文本框字符行数；
- rows是文本框字符列数；
<textarea rows=”25” cols=”5”>initial value</textvalue>
另外，不能在HTML中给textarea指定最大字符数；
用户输入的内容都保存在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. 自动切换焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS自动切换焦点</title>
<script type="text/javascript">
window.onload = function(){
var EventUtil = {
addhandler:function(element,type,handler){
if(element.addEventListenter){
element.addEventListenter(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
/*
该方法返回Event对象的引用，考虑到IE中对事件的位置的不同，可以使用这个方法取得Event对象。
*/
getEvent: function(event){
return event ? event: window.event;
},
//返回事件的目标
getTarget: function(){
return event.target || event.srcElement;
},
/*通过比较用户输入的值与文本框的maxlength特性，确定是否达到最大长度
当两个值相等时，则需要查找表单字段的集合，查找到下一个文本框后将焦点切换
*/
preventDefault: function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation: function(){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBuddle = true;
}
},
removehandler: function(element,type,handler){
if(element.removeEventListenter){
element.addEventListenter(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on" +type] = null;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
},
//处理字符编码
}
var textarea = document.forms[0].elements["text"];
var button = document.getElementById("button");
(function(){
function tabForward(event){ //event事件对象传到事件处理程序中去
event = EventUtil.getEvent(event); //把event传给getEvent()方法
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength) { //达到最大长度
var form = target.parentElement;
for(var i=0, len=form.elements.length; i<len-1; i++)
{
if(form.elements[i] == target){
form.elements[i+1].focus(); //切换焦点
return;
}
}
}
}
var textName = document.getElementById("textName");
var textTel = document.getElementById("textTel");
var textID = document.getElementById("textID");
EventUtil.addhandler(textName,"keyup",tabForward); //在用户输入新字符后触发keyup事件
EventUtil.addhandler(textTel,"keyup",tabForward);
EventUtil.addhandler(textID,"keyup",tabForward);
})();
}
</script>
</head>
<body>
<form>
<input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>
<input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>
<input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/>
</form>
</body>
</html>
4. HTML5约束验证API
1.必填字段required
2.其他类型输入：email，url
3.数值范围：number、min、max、step
4.输入模式：pattern
5.检测有效性：checkValidity()
6.禁止验证：novalidate
