js自動模擬用戶鍵盤輸入,自動觸發輸入事件,三種方法,適用vue,react網頁

1.派發事件,這種方法適用於vue頁面,和純淨的html頁面;

let nputLabel = $("div"); //這裏用的是jquery,也可以適用js,注意後面操作的元素都是dom對象,所以使用了jquery後需要下標轉爲dom
          inputLabel[0].value = "deal";
          inputLabel[0].dispatchEvent(
            new Event("change", {
              view: window,
              bubbles: true,
              cancelable: true,
            })
          );

2.簡寫派發事件,也僅適用vue頁面和純淨的html頁面;

let inputLabel = $(".el-input-group__prepend+.el-input__inner");
        inputLabel.val(asin);//給input賦值
        inputLabel[0].dispatchEvent(new InputEvent("input"));//觸發輸入事件

3.react頁面專屬,因爲react16內部定義了descript攔截value,所以派發事件,無法觸發input所綁定的事件,需要重置輸入狀態;

let inputLabel = $("div"); //這裏獲取需要自動錄入的input內容
          let lastValue = inputLabel[0].value;
          inputLabel[0].value = "deal";
          let event = new Event("input", { bubbles: true });
          //  React15
          event.simulated = true;
          //  React16 內部定義了descriptor攔截value,此處重置狀態
          let tracker = inputLabel[0]._valueTracker;
          if (tracker) {
            tracker.setValue(lastValue);
          }
          inputLabel[0].dispatchEvent(event);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章