文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足_jquery

php中文网
发布： 2016-05-16 18:16:27
原创
1082人浏览过

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.

但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.

好了, 以下是演示例子, 主流浏览器都没问题:

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript Array对象基础知识小结_javascript技巧 下一篇：javascript正则表达式中参数g(全局)的作用_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
js如何实现文字跑马灯效果 跑马灯动画的3种实现方案！ JS实现跑马灯效果主要有三种方案：1.基于CSSoverflow:hidden和JS定时器，2.使用CSSanimation动画，3.利用Canvas绘图。第一种方案通过overflow:hidden隐藏超出容器文字，并用JS定时器不断改变marginLeft实现滚动；第二种方案使用CSSanimation定义关键帧动画，代码简洁性能好但灵活性较差；第三种方案使用Canvas绘制文字并动态更新位置，灵活性高但实现复杂。性能优化技巧包括减少DOM操作、使用requestAnimationFrame
2025-06-23 23:58:01
592
JS如何生成动态折线图 4种动画效果增强折线图表现力 要实现动态折线图，关键步骤包括：1.数据准备；2.选择合适的JS库（如Chart.js、ECharts、D3.js）；3.初始化图表；4.绘制折线；5.实现动态效果；6.添加动画。其中，动态效果可通过setInterval或requestAnimationFrame实现数据更新，动画可包含线条生长、数据点浮动、颜色渐变和鼠标悬停效果。选择图表库时，Chart.js适合基础需求，ECharts适合复杂图表，D3.js适合极致定制。平滑过渡可通过线性插值、贝塞尔曲线插值或样条插值实现，不同库支持程度
2025-06-23 23:43:01
383
js怎样实现文字抖动效果 4种抖动动画让文本更具表现力 要实现文字抖动效果，可通过JS控制文字位置变化，结合CSS动画或外部库来实现。方法一为简单随机抖动，通过随机改变left和top值模拟抖动；方法二是利用CSS动画定义抖动并通过JS控制播放与停止；方法三使用贝塞尔曲线配合GSAP库实现复杂轨迹抖动；方法四根据鼠标移动动态调整抖动幅度增强互动性。性能优化包括减少DOM操作、使用CSS动画、requestAnimationFrame、节流防抖、简化计算、硬件加速等。让抖动更自然的方法有引入不规则抖动、缓动函数、物理模拟及细节调整。其他增强表现力的文字
2025-06-23 23:13:01
403
js怎样操作Web Locks API Web资源锁的3种应用场景 WebLocksAPI主要解决多个脚本同时访问和修改共享资源导致的数据竞争和冲突问题。它通过navigator.locks对象提供的request()和query()方法协调资源访问，确保同一时间只有一个脚本操作资源。使用步骤包括：1.检查浏览器是否支持navigator.locks；2.使用request()请求锁并执行受保护操作；3.锁在回调结束后自动释放，也可显式调用release()；4.通过mode参数控制锁的模式，如exclusive独占或shared共享。应用场景包括防止多Tab页
2025-06-23 23:05:01
710
js如何计算数组元素总和 快速求数组和的2种常用方法 要计算JavaScript数组元素的总和，推荐使用reduce()方法。1.使用reduce()方法：通过arr.reduce((acc,val)=>acc+val,0)实现，代码简洁且易读；2.使用for循环：通过遍历数组并累加元素值，性能略优但在现代引擎中差异不大；3.使用for...of循环：可读性好，性能与for循环相当；4.处理非数字元素：需先过滤或转换，如arr.filter(Number).map(Number).reduce(...)；5.其他方法：如lodash的sum()函数
2025-06-23 22:52:01
999
js怎么控制gif动画播放 动态控制GIF播放与暂停 控制GIF动画播放的核心方法是通过JavaScript操作帧实现，具体步骤如下：1.使用工具如gifuct-js或omggif解析并提取GIF的帧数据和延迟时间；2.将帧数据存储在数组中，并创建Canvas元素作为显示容器；3.利用setInterval定时器按照帧延迟依次显示帧图像，实现循环播放；4.添加按钮或事件监听器控制播放与暂停。选择库时应考虑体积、性能、兼容性和易用性，常用库包括gifuct-js和omggif。处理透明背景可通过putImageData函数及正确设置Canvas实现。
2025-06-23 22:33:05
105
js如何检测GPU信息 浏览器GPU信息获取方法大全 要检测JavaScript中的GPU信息，可以通过WebGL扩展查询和Canvas性能测试实现间接推断。①使用WebGLAPI获取渲染器、厂商、版本及支持的扩展，如gl.RENDERER可能包含GPU名称，gl.VENDOR提供制造商信息，getSupportedExtensions()可显示功能支持；②通过Canvas执行复杂绘图并测量帧率评估性能，但结果受CPU等其他因素影响；③判断是否使用独立显卡可结合分析gl.RENDERER字符串（如"NVIDIAGeForce"）、性能对比和扩展支持
2025-06-23 22:14:01
504
js如何实现数组元素映射 快速掌握数组map方法的使用技巧！ JavaScript的map()方法通过回调函数将数组元素转换为新值生成新数组。1.核心机制是接收一个回调函数，处理每个元素并返回新数组；2.回调函数可接受currentValue、index和array三个参数；3.可用于数值运算（如乘以2）或提取对象属性（如获取name）；4.与forEach()不同，map()返回新数组而forEach()仅执行操作无返回值；5.性能较好但应避免复杂计算、修改原数组，推荐用简洁箭头函数以提升效率。
2025-06-23 22:07:01
849
js中如何用解构赋值简化条件判断 解构赋值在JavaScript中能简化条件判断。它通过结合默认值和短路运算，使处理嵌套对象、多属性判断及函数参数更简洁安全；0.可减少传统if链式判断，提升代码可读性；1.适用于API数据或配置项存在性检查；2.用于提取多个属性进行逻辑处理；3.可用于函数参数解析并设置默认值；4.但也需注意避免过度使用导致可读性下降，应确保目标对象存在并选用清晰变量名。
2025-06-23 21:57:02
557
js如何实现防抖函数 防抖函数的3种经典实现方案 防抖函数的核心是延迟执行并重置计时，适用于搜索建议等场景。具体实现通过setTimeout延迟触发函数，若再次触发则清除原定时器并重新计时。对于需要立即执行的情况，可引入isInvoked变量控制首次执行。同时可通过添加cancel方法实现手动取消。使用apply确保上下文和参数正确传递。防抖与节流的区别在于防抖保证最后一次触发有效，而节流确保一段时间内仅执行一次。常见应用场景包括搜索建议、窗口调整、按钮防重复点击、文本自动保存等。
2025-06-23 21:52:02
880
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部