前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >input动态赋值后怎么触发change事件 原

input动态赋值后怎么触发change事件 原

作者头像
tianyawhl
发布2019-04-04 09:57:03
8.2K0
发布2019-04-04 09:57:03
举报
文章被收录于专栏:前端之攻略

input经常用的事件有oninput与onchange

oninput:事件在用户输入时触发。

onchange:事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发

但是当我们给元素赋值时并不会触发上面的2种事件,如果我们想赋值后触发上面的事件,可以采用下面的方法

一、js 实现方法

代码语言:javascript
复制
<input type="text" id="demo" onchange="txtChange(this)" />
代码语言:javascript
复制
 <script type="text/javascript">
    var element = document.getElementById("demo")
    //element.focus();
    element.value = "this is sun222"
    //txtChange()  如果只是赋值后执行一个函数,只要调用函数即可
    if (element.fireEvent) {
        element.fireEvent('onchange');
    } else {
        ev = document.createEvent("HTMLEvents");
        //event.initEvent(eventType,canBubble,cancelable)
        //eventType:字符串值,事件的类型
        //canBubble:事件是否冒泡
        //cancelable:是否可以用preventDefault()方法取消事件
        ev.initEvent("change", false, true);
        element.dispatchEvent(ev);
    }
    function txtChange(a) {
        alert(a.value);
    }
    </script>

二、jQuery实现方法

代码语言:javascript
复制
<input type="text" id="demo" />
代码语言:javascript
复制
$(document).ready(function() {
        $("#demo").change(function() {
            alert("hi")
        })
        //$("#demo").val("this is lily").change()   此种方法可以,下面的方法也可以
        $("#demo").val("this is lily111")
        $("#demo").trigger("change")
    })

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/09/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档