- 浏览: 50616 次
- 来自: 深圳
文章分类
最新评论
总结一下 :要想在输入框超过限制长度时候,不给输入。之前是用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来捕获文本改变事件,试验成功!
不是即时监听,要等你松手后才能提示你已经超出输入长度,在进行截取。
如果要做成类似与到了显示输入长度 就无法输入的效果
要采用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来捕获文本改变事件,试验成功!
发表评论
-
IE下使用uploadify上传文件的相关问题解决
2017-10-12 12:14 277SWFUpload.prototype.cleanUp = f ... -
js和java 中文乱码
2016-11-18 11:37 553因为在jsp中对中文进行了编码的时候用的是UTF-8的编码 ... -
js常用方法
2016-08-25 17:37 445当前返回日期yyyy-MM-dd function get ... -
js时间比较/当前时间
2015-12-03 21:49 471var selectDate=edit.getContro ... -
js map类型
2015-08-25 10:11 936<script> function Map2() ... -
javat替换成换行符,关于textarea中换行、回车、空格的识别与处理
2015-08-24 20:05 1635var newString=con.replace(/\n/ ... -
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
2015-07-18 15:24 5028后退时关闭当前页面 < ... -
限制文本框只能输入数字
2015-07-07 15:59 397js控制只允许输入数字 avascript 只允许输入数字有很 ... -
正确优雅的解决用户退出问题——JSP和Struts解决方案(转载)
2015-07-06 17:37 501正确优雅的解决用户退出问题——JSP和Struts解决方案(转 ... -
长度限制
2015-06-12 16:56 652//=============得到输入框长度(包括中文)=== ... -
回车和点击实现表单提交
2015-06-02 14:06 407<html> <head> <t ... -
js记录用户名密码 COOKIE
2015-06-02 10:43 809记录COOKIE后,当取消复选框时 发现无法删除COOKIE。 ... -
Js实现图片上传前在本地预览
2015-05-28 17:59 531<!DOCTYPE html PUBLIC " ... -
获取系统当前时间 适合用于头部
2015-05-26 16:26 429<!DOCTYPE HTML PUBLIC " ... -
JS 将字符串转换成日期类型
2015-05-22 14:52 630JS 将字符串转换成日期类型 2013-06-19 17:48 ... -
JS函数中带与不带括号的区别
2015-05-21 18:16 429JS函数中带与不带括号的区别 其实总结起来如下: 函数只要是要 ... -
JS 字符串长度判断
2015-05-20 10:08 1652content.replaceAll("(\r\n| ... -
js开发遇到在方法中调用另一方法问题
2015-05-19 18:03 498/eas_crm_dayi/WebContent/ecp/pa ...
相关推荐
js监听输入框值的即时变化onpropertychange、oninput.docx
在本篇文章里小编给大家整理的是一篇关于jQuery/JS监听input输入框值变化实例内容,需要的朋友们学习下。
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后...
1、在元素上同时绑定 oninput 和onporpertychanger事件 例: [removed] function aa(e){alert(...2、使用原生js添加监听事件 [removed] $(function(){ if(\v==v){//true为IE浏览器,感兴趣的同学可
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
在写输入用到input的时候,经常出现以下几种情况: 只能输入某。栗子:只能输入数字,只能输入字母(大写,小写)只能输入某固定格式。栗子:只能输入金额,只能输入小数且最多保留2位不能输入某。栗子:不能输入...
js实现input限制输入字符(字节)数多出的自己自动去掉
可以有效的阻止在hutml文档的input框中输入内容,纯手写,经检测可以顺利运行
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单: 将匹配的内容放在一个div中,input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题: input的onblur中隐藏...
1.遇到问题: 需要做一个点击input弹出带搜索的键盘。...input @keyup.13=show() type="search" ref="input1"> show(){ this.$refs.input1.blur(); } 3.测试时发现ios无法弹出带搜索的键盘 解决: 给
代码主要实现点击添加多个input输入框,并对每个输入框里的数据进行判断
用JS控制input的输入内容,如:只能输入英文、只能输入数字等等。
有好多人会遇到注册或者登陆密码时要求只能入数字或者字母,不能出现其他符号什么的,我这是在用apicloud工具开发遇到的小问题,所以发出来给其他人可能会遇到这个问题的人
JS控制input_输入字符限制
js与jquery实时监听输入框值的oninput与onpropertychange方法.docx
javaScript Input输入限制集合,直接引用就可以使用,以后会慢慢继承再其中,感谢下载体验
今天小编就为大家分享一篇angular实现input输入监听的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
自己花了 一晚上搞出来的,没有找到合适的,最后自己根据观看博客的总结,做了此demo 下载运行即可