js代码模拟实现输入框input事件

一些时候我们要做网页插件时往往需要去做很多输入框自动赋值,去实现对应功能.
随着web前端发展,MVVM框架的流行,很多页面想要实现自动赋值不再向以前那样对输入框简单的赋值即可,还需要对应的触发相关的事件让对应框架去取值才行.
一般情况下,最常见的就是发送输入框input事件了,(如vue的v-model本身就是自动帮你绑定了input事件去取值)
这里简单封装了一个方法.

window.___inputValue = function (dom, st) {
  var evt = new InputEvent('input', {
    inputType: 'insertText',
    data: st,
    dataTransfer: null,
    isComposing: false
  });
  dom.value = st;
  dom.dispatchEvent(evt);
}

简单的调用:

window.___inputValue(document.querySelector('input'),'输入要赋值的内容')

这方面的资料相对较少,这里记录一下以便将来需要用到时查阅方便.

标签: none

已有 3 条评论

  1. feng feng

    这里提一下InputEvent可能在低版本谷歌内核中不支持,可以用UIEvent对象冒充,也一样可以达到目的
    window.___uiEvent = function (dom, st) {
    var evt = new UIEvent('input', {
    bubbles: false,
    cancelable: false
    });
    dom.value = st;
    dom.dispatchEvent(evt);
    }

    回复
  2. 1 1

    2

    回复
  3. KongJianYong KongJianYong

    我测试一下，点击【保存】，又恢复原数据，不有更改input中的值，只能用键盘操作

    回复

添加新评论