`

js动态的改变一个输入框中的值

阅读更多

当用js动态的改变一个输入框中的值后,并不能触发它的onchange事件why?

onchange事件的触发条件需满足:1、输入框的值发生改变;2、输入框失去焦点。事件触发发生在2,而不是1的过程中。如果值改变则触发事件则需要使用onpropertychange(IE)或oninput(FF);
总结:

1、onchange事件与onpropertychange事件的区别:
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件IE专有。

2、oninput事件与onpropertychange事件的区别:
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;onpropertychange事件是任何属性改变都会触发的,而oninput却只在value改变时触发,oninput要通过addEventListener()来注册,onpropertychange注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)

3、oninput与onpropertychange失效的情况:
(1)oninput事件:a). 当脚本中改变value时,不会触发;b). 从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。
分享到:
评论

相关推荐

    jQuery/JS监听input输入框值变化实例

    在本文中,我们将探讨如何使用jQuery和JavaScript来监听HTML input元素的值变化事件。文章首先介绍了input元素值变化的不同监听方法,并...这使得文章成为了一个很好的资源,供前端开发人员在处理表单输入监听时参考。

    js下拉选择框与输入框联动实现添加选中值到输入框的方法

    本文介绍的下拉选择框与输入框的联动技术,是通过在JavaScript中监听下拉选择框的onchange事件,并利用DOM操作来改变输入框的值。这是一种常用的前端交互技术,适用于多种Web应用场景。在实际开发中,开发者可以根据...

    复选框点击添加或删除text输入框value值.zip

    "复选框点击添加或删除text输入框value值.zip"这个压缩包文件提供了一个具体的示例,涉及到JavaScript(JS)编程中的事件处理、DOM操作以及数据绑定等知识点。下面我们将深入探讨这些技术。 首先,复选框(Checkbox...

    js实现input输入框输入信息后出现下拉选择框

    js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取

    Js高亮显示文本输入框.rar

    在JavaScript编程中,高亮显示文本输入框是一个常见的需求,特别是在开发富文本编辑器、代码编辑器或搜索功能时。这个“Js高亮显示文本输入框.rar”压缩包可能包含了实现这一功能的相关代码和资源。下面我们将深入...

    CSS3实现动态输入框input框特效.zip

    2. **过渡效果**:`transition`属性允许我们平滑地改变一个或多个CSS属性值,创造出动态的视觉体验。在输入框中,我们可以为`width`, `border-width`, `opacity`等属性设置过渡效果,使得输入框在获得焦点或失去焦点...

    js动态修改input输入框的type属性及验证Email

    综上所述,动态修改`input`的`type`属性可以灵活地改变输入框的行为,而邮箱验证则是确保用户数据质量的重要步骤。在实际开发中,理解并熟练运用这些技术对于创建健壮且用户友好的Web应用程序至关重要。

    js输入框字数限制提醒.zip

    如果"js输入框字数限制提醒.zip"中的代码提供了不同的实现方式,可能涉及到更复杂的逻辑,如处理多行文本、考虑全角字符和半角字符的长度差异、以及在输入过程中动态调整输入框样式等。这些高级特性可以增强用户体验...

    js 特效 html 特效 查看输入框内容

    js 特效 html 特效 查看输入框内容 js 特效 html 特效 查看输入框内容

    js 验证表单中的值是否改变

    在上述代码中,我们通过`getElementById`获取了表单中的文本输入框,并为其添加了一个`change`事件监听器。当用户修改输入框的值时,事件处理函数会被调用,检查当前值是否与初始值不同,从而判断值是否发生改变。 ...

    客户端任意改变只读输入框内容示例

    在IT安全领域,客户端任意改变只读输入框内容是一个重要的话题,主要涉及到XSS(跨站脚本攻击)和用户界面篡改。本示例旨在揭示如何通过客户端,特别是利用JavaScript,来修改那些通常被视为只读的输入框内容。下面...

    js监听输入框值的即时变化onpropertychange、oninput

    如果需要更灵活的事件处理方式,例如在脚本中动态添加事件监听器,那么应该使用 `addEventListener` 方法。这是 W3C 标准推荐的事件注册方式,并且适用于 `oninput` 事件: ```javascript var inputElement = ...

    input输入框获取js点击文字内容.zip

    总的来说,"input输入框获取js点击文字内容.zip"项目是一个利用JavaScript实现的交互特效,它简化了用户与网页的交互,提高了用户体验。具体实现可能包括对`input`事件和`click`事件的监听,以及对`input`元素`value...

    【JavaScript源代码】react+antd.3x实现ip输入框.docx

    在React和Ant Design 3.x框架下,实现一个IP输入框功能涉及到多个关键知识点,包括组件化开发、React状态管理、事件处理以及Ant Design的使用。以下是对这些知识点的详细说明: 1. **React组件**: - `IpInput`是...

    js和html模拟系统的ip地址输入框

    在实际开发中,我们可能会将这些功能封装在一个自定义的JS组件中,便于复用和维护。这样的组件可能包含构造函数、方法(如`validate`、`format`)以及数据属性(如`inputElement`、`valid`)等。 总结来说,模拟...

    jQuery插件模拟支付宝密码输入框效果.zip

    当用户在某个输入框中输入或删除数字时,我们需要更新该输入框的值,并根据输入状态决定是否激活下一个输入框。 在CSS方面,我们可以利用伪类如`:focus`来改变当前被选中的输入框样式,使其突出显示。此外,为了...

    js+css模拟PC端淘宝支付密码输入框

    在本文中,我们将深入探讨如何使用JavaScript(JS)和Cascading Style Sheets(CSS)来模拟PC端淘宝支付密码输入框。这个功能在电子商务平台上广泛使用,为用户提供了一个安全且用户体验良好的方式来输入六位数字...

    js控制TextBox值改变别的控件的值跟着改变。无刷新

    在JavaScript(JS)编程中,实现TextBox控件的值改变时自动更新其他相关控件的值,无需页面刷新,是一种常见的交互设计。这种技术通常应用于动态数据更新和实时反馈的场景,可以提升用户体验。以下是一些关键知识点...

    jQuery手机端输入框键盘键入车牌号码特效源码

    【jQuery手机端输入框键盘键入车牌号码特效源码】是一个专门为移动设备设计的JavaScript库,利用jQuery实现的用户在输入框中输入车牌号码时的交互特效。此特效旨在提升移动用户在输入车牌号码时的体验,通过模拟手机...

    输入框实现自动提示输入框实现自动提示

    此外,我们还需要处理用户的交互,比如当用户选择了一个提示项后,更新输入框的值,并关闭下拉列表。这可以通过监听下拉列表中的`click`事件来实现。 在实际应用中,为了提升用户体验,还可以加入一些额外的功能,...

Global site tag (gtag.js) - Google Analytics