js监听文本内容改变事件最佳实践oninput和onpropertychange - 知向前端

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

一直单身的烈酒 · 探索与实践：强大的Futil-js工具库· 1 周前 ·

愉快的铁链 · 在select选项上绑定事件 - · 4 天前 ·

才高八斗的手套 · threejs ...· 2 天前 ·

奔放的水煮肉 · 基于腾讯x5开源库，提高webView开发效 ...· 昨天 ·

威武的水桶 · js和python得到分子2D/3D图 ...· 19 小时前 ·

重感情的大熊猫 · 梅萨桌[CG-H039-1]-咖啡桌-创意家 ...· 1 月前 ·

曾深爱过的葡萄 · 广东排名多少可以上华南师范大学？附广东最低录 ...· 5 月前 ·

有情有义的牛肉面 · 广宇发展正筹划重大资产置换，鲁能地产拟从上市 ...· 5 月前 ·

怕老婆的小蝌蚪 · 使用聚合对选定字段执行汇总计算 - AWS 连接词· 6 月前 ·

听话的小摩托 · 凤凰展翅民航腾飞 _光明日报 _光明网· 7 月前 ·

onpropertychange可以解决上面存在的问题（但缺点是IE专属）
oninput（属于html5,IE9以下的浏览器是不支持oninput事件）
所以我们需要综合oninput和onpropertychange
以下是使用oninput和onpropertychange实现监听文本框内容实例：
案例需求：
请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。
要求写出完整的文本框HTML代码和JavaScript逻辑代码。对于JS原生写法而言， oninput 是 HTML5 的标准事件
oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
·修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
·修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
·修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：
</head>
<input type="text" id='text'>

<script>
var text=document.getElementById("text");
if('oninput' in text){//是否支持oninput
text.addEventListener("input", function(){
this.style.color = /^[1-9]\d*$/.test(this.value) ? "#000" : "#f00";
},false);
}else{//ie7 8
text.onpropertychange = function(){
this.style.color = /^[1-9]\d*$/.test(this.value) ? "#000" : "#f00";
</script>
使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码：
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$('#text').bind('input propertychange', function() {
$(this).css('color',/^[1-9]\d*$/.test($(this).val()) ? "#000" : "#f00");
</script>
</body>
</html>

清酒红人面，财帛动人心

2023-03-16 10:17

mac中给.command文件加权限上级目录打开命令行运行 sudo chmod +x ./文件名.command

2023-02-17 11:06

Jon
@时雨：哈哈，我也看不懂

时雨
啥啊？一堆加密通信吗？

html+css(25) js+jquery+ajax(55) js库(17) angular(13) 前端工具(16) 其他(10)

deployUrl解决angular项目打包后静态资源的部署到其它目录的问题

使用 navigator.userAgent 判断当前浏览器内核

js模拟元素点击事件以及下载网络资源文件方法乱炖

seajs+spm3修炼手册

2023年1月(1)