`

js input即时监听输入值

    博客分类:
  • JS
 
阅读更多
总结一下 :要想在输入框超过限制长度时候,不给输入。之前是用onkeyup做的。
不是即时监听,要等你松手后才能提示你已经超出输入长度,在进行截取。
如果要做成类似与到了显示输入长度 就无法输入的效果

要采用elem.onpropertychange(IE)或elem.addEventListener("input", textChange, false);

function lengthLimit(elem, showElem, max){
var elem = document.getElementById(elem);
var showElem = document.getElementById(showElem);
var max = max || 50;// 最大限度字符,汉字按两个字符计算


function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符
return str.replace(/[^\x00-\xff]/g,"xx").length;
};


// 监听textarea的内容变化
if(/msie (\d+\.\d)/i.test(navigator.userAgent) == true) {// 区分IE
elem.onpropertychange = textChange;
}else{
elem.addEventListener("input", textChange, false);
}


function textChange(){// 内容变化时的处理
var text = elem.value;
var count = getTextLength(text);
if(count > max){// 文字超出截断
for(var i=0; i<text.length; i++){
if(getTextLength(text.substr(0, i)) >= max){
elem.value = text.substr(0, i);
break;
};
}
}
};
textChange();// 加载时先初始化
};

调用时lengthLimit("FName", "dsa", 49);


===========================================================
以下没试验过 留着有机会试试

input 文本框内容改变,我们可以使用onchange或者onblur来进行判断,但是onchange是在文本内容改变,然后失去焦点的时候发生,onblur是在失去焦点时候发生,不会自己去判断。

网上一位老兄采用如此方法:

<input type="text" id="testId" readonly onPropertyChange="showValue(this.value)" />

<script>
function dochg(){
document.getElementById("testId").value = "test"
}
setTimeout("dochg()",1000)

function showValue(obj){
alert("changed value is " + obj);
}
</script>

受到启发:

可以采用onPropertyChange来捕获文本改变事件,试验成功!
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics