<div>
<span>只允许输入１到50</span> <br>
<input id="multiple_num" value="1">
</div>
<script>
var doc = document;
/**** 事件处理机 start ****/
var EventUtil = {
//注册
addHandler: function(element, type, handler) {
if (!element) return;
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除注册
removeHandler: function(element, type, handler) {
if (!element) return;
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
/*** 只允许输入数字处理函数 -- start --**/
var multiple_handle = function() {
var multiElement = doc.getElementById("multiple_num");
if (!multiElement) { //如果元素不存在，退出
return;
}
var type = "input"; //默认认为是input ,Firefox浏览器
if (!!document.all && navigator.userAgent.indexOf('opera') === -1) {
type = "propertychange"; //如果为IE 则为propertychange事件
}
var meValue = multiElement.value; //取得input的值
//进行值判断前先移除注册事件，因为IE的propertychange 只要文本框里的属性发生变化
// propertychange就会触发。导致死循环;先移除事件，处理完后再绑定事件
EventUtil.removeHandler(multiElement, type, multiple_handle);
var reg = /^[1-4]\d{1}$|^50$|^[1-9]$/;
if (!reg.test(meValue)) {
if (parseFloat(meValue) > 50) { //大于50则认为是50
multiElement.value = 50;
}
else {
multiElement.value = multiElement.value.slice(0, -1); //如果输入了非数字。则删除当前的输入
}
}
//处理完后再绑定事件
EventUtil.addHandler(multiElement, type, multiple_handle);
}
/* -end- **/
/** 注册事件 IE 为propertychange ,FF 为 input**/
EventUtil.addHandler(doc.getElementById("multiple_num"), "propertychange", multiple_handle);
EventUtil.addHandler(doc.getElementById("multiple_num"), "input", multiple_handle);
</script>
