javascript---TextUtil对象封装(文本框验证)
用对象封装需要的方法:1:限制文本框字符数 2:允许/阻止文本框字符 3:禁止粘贴 4:失去焦点时验证 5:上下键操作数字文本
Codevar TextUtil = new Object;
/*
isNotMax()的返回值被传给事件处理函数.这是一种阻止事件默认行为发生的原始方法.
当文本长度小于maxlength时,方法返回true,表示keypress事件可以正常选择.一旦达
到最大值,方法返回false,就阻止字符添加到文本框中.而用标准的preventDefault()方法来阻止
kepress事件在mozilla中处理上有错误.
*/
TextUtil.isNotMax = function(oTextArea) {
return oTextArea.value.length != oTextArea.getAttribute("maxlength");
};
/*
参数: 要处理的文本框 event对象 是否启用粘贴
类似isNotMax() ,要在onkeypress事件处理函数中调用这个方法,当字符被允许
时返回true 否则:返回false.
注意event.formatEvent()方法的使用,当event对象是直接传递给方法而未使用
EventUtil.getEvent()方法时,这种使用是必要的.事件对象经合理地格式化后,
方法将invalidchars特性保存到一个变量中,然后用事件的charCode特性和
String.fromCharCode()取出将被输入到文本框中的字符.这时无效的字符被存储
在sInvalidChars中,将被插入的字符存储在schar中.然后,用indexof()方法判断
字符是否在sInvalidChars字符串中.如果不在,那么indexof()返回-1.所以当字
符串不存在与sInvalidChars中时,bIsValidChar为true.返回语句返回bIsValidChar
和oEvent.ctrlKey的逻辑或值.这个运算是必要的,如果没有它,当按下Ctrl键后,
再按其他字符(例如Ctrl+C复制) 这个方法就会将其阻止.所以,如果字符是有效的,
方法返回true 而且如果按下CTRl键,也应该返回true.
*/
TextUtil.blockChars = function (oTextbox, oEvent, bBlockPaste) {
oEvent = EventUtil.formatEvent(oEvent);
var sInvalidChars = oTextbox.getAttribute("invalidchars");
var sChar = String.fromCharCode(oEvent.charCode);
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1;
//bBlockPaste :true 时 禁止粘贴
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
} else {
return bIsValidChar || oEvent.ctrlKey;
}
};
//例子: 不允许输入数字
/*
<body>
<p>Try typing in the textbox. You can only type non-number characters.</p>
<form method="post" action="javascript:alert('Submitted')">
<textarea rows="10" cols="25" invalidchars="0123456789" onkeypress="return TextUtil.blockChars(this, event)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
*/
//允许有效的字符
TextUtil.allowChars = function (oTextbox, oEvent, bBlockPaste) {
//格式化event对象
oEvent = EventUtil.formatEvent(oEvent);
//得到validchars属性
var sValidChars = oTextbox.getAttribute("validchars");
//将ascii值转换为字符
var sChar = String.fromCharCode(oEvent.charCode);
//如果sValidChars中包含sChar 则返回true
var bIsValidChar = sValidChars.indexOf(sChar) > -1;
//如果按下了Ctrl+v也返回true
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v");
} else {
return bIsValidChar || oEvent.ctrlKey;
}
};
//例子:只允许输入数字 ;禁止粘贴
//IE onpaste="return false" 禁止粘贴
//其他:onpaste="return false" oncontextmenu="return false"
/*
<body>
<p>Try typing in the textbox. You can only type number characters. And you cannot paste any values.</p>
<form method="post" action="javascript:alert('Submitted')">
<textarea rows="10" cols="25" validchars="0123456789"
onkeypress="return TextUtil.allowChars(this, event, true)"
onpaste="return false" oncontextmenu="return false"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
*/
//失去焦点时验证;在用户输入正确的值之前,不让用户移动到另一个字段
// 不允许用户输入指定值
TextUtil.blurBlock = function(oTextbox) {
//get the invalid characters
var sInvalidChars = oTextbox.getAttribute("invalidchars");
//split the invalid characters into a character array
var arrInvalidChars = sInvalidChars.split("");
//iterate through the characters
for (var i=0; i< arrInvalidChars.length; i++){
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {
alert("Character '" + arrInvalidChars[i] + "' not allowed.");
oTextbox.focus();
oTextbox.select();
return;
}
}
};
//允许用户输入的值
TextUtil.blurAllow = function(oTextbox) {
//get the valid characters
var sValidChars = oTextbox.getAttribute("validchars");
//split the textbox value string into a character array
var arrTextChars = oTextbox.value.split("");
//iterate through the characters
for (var i=0; i< arrTextChars.length; i++){
if (sValidChars.indexOf(arrTextChars[i]) == -1) {
alert("Character '" + arrTextChars[i] + "' not allowed.");
oTextbox.focus();
oTextbox.select();
return;
}
}
};
//上下键操作文本加1减1
TextUtil.numericScroll = function (oTextbox, oEvent) {
oEvent = EventUtil.formatEvent(oEvent);
var iValue = oTextbox.value.length == 0 ? 0 :parseInt(oTextbox.value);
//设置属性最大值最小值
var iMax = oTextbox.getAttribute("max");
var iMin = oTextbox.getAttribute("min");
if (oEvent.keyCode == 38) {
if (iMax == null || iValue < iMax) {
oTextbox.value = (iValue + 1);
}
} else if (oEvent.keyCode == 40){
if (iMin == null || iValue > iMin) {
oTextbox.value = (iValue - 1);
}
}
};
//例子
/*
<form method="post" action="javascript:alert('Submitted')">
<input type="text" onkeypress="return TextUtil.allowChars(this, event)"
validchars="0123456789" onblur=" TextUtil.blurAllow(this)"
onkeydown=" TextUtil.numericScroll(this, event)"
max="100" min="0" />
<input type="submit" value="Submit Form" />
</form>
*/
//---------------------------------------------------------------
//匹配 参数:要匹配的文本以及要进行匹配的数组
//搜索字符串数组并返回特定字符开头的所有值 返回包含匹配值的数组
TextUtil.autosuggestMatch = function (sText, arrValues) {
var arrResult = new Array;
if (sText != "") {
for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText) == 0) {
arrResult.push(arrValues[i]);
}
}
}
return arrResult;
};
/*
参数:要处理的文本框 可能值的数组 要显示侯选项的列表框的ID
*/
TextUtil.autosuggest = function (oTextbox, arrValues, sListboxId) {
var oListbox = document.getElementById(sListboxId);
var arrMatches = TextUtil.autosuggestMatch(oTextbox.value, arrValues);
ListUtil.clear(oListbox);
for (var i=0; i < arrMatches.length; i++) {
ListUtil.add(oListbox, arrMatches[i]);
}
};
//例子:
/*
<html>
<head>
<title>Autosuggest Textbox Example</title>
<script type="text/javascript" src="listutil.js"></script>
<script type="text/javascript" src="textutil.js"></script>
<script type="text/javascript">
var arrColors = ["red", "orange", "yellow", "green", "blue", "indigo",
"violet", "brown", "black", "tan", "ivory", "navy",
"aqua", "white", "purple", "pink", "gray", "silver"];
arrColors.sort();
function setText(oListbox, sTextboxId) {
var oTextbox = document.getElementById(sTextboxId);
if (oListbox.selectedIndex > -1) {
oTextbox.value = oListbox.options[oListbox.selectedIndex].text;
}
}
</script>
</head>
<body>
<p>Type in a color in lowercase:<br />
<input type="text" value="" id="txtColor" onkeyup="TextUtil.autosuggest(this, arrColors, 'lstColors')" /><br />
<select id="lstColors" size="5" style="width: 200px" onclick="setText(this, 'txtColor')"></select>
</p>
</body>
</html>
*/
