请教一个 js 问题,为什么这个 input 会在鼠标滑走后里面的值立即消失了,我想给 input 强行输入内容

2023-11-27 15:30:11 +08:00
 gelilaohuang

用在油猴脚本里,我试了很多网页的 input 都可以直接通过.value 去赋值,但遇到一个字节的后台就是赋不进去,请大触指点

$(document).on('mouseenter', "input[placeholder='Enter ID']", function () {
    let ele = $(this).get()
    tEvent(ele, "click");
    tEvent(ele, "input");
    ele.value = 123456789;

    tEvent(ele, "keyup");
    tEvent(ele, "change");
    // tEvent(ele, "blur");
})

function tEvent (e, evType) {
    if (e) {
        window.newhtmlevents = window.newhtmlevents || document.createEvent("HTMLEvents");

        newhtmlevents.initEvent(evType, true, true);
        return e.dispatchEvent(newhtmlevents)
    }
}

1622 次点击
所在节点    JavaScript
15 条回复
shuxhan
2023-11-27 15:51:33 +08:00
下面报错,改成这样可以正常运行

if (e) {
$(e).trigger(evType);
}
gelilaohuang
2023-11-27 16:20:16 +08:00
@shuxhan 改成 trigger 也一样,好像遇到疑难杂症了一样,鼠标一滑在表格上里面值就被清空了,我录了个视频演示
https://imgur.com/a/LHsBRuw
shuxhan
2023-11-27 16:24:50 +08:00
@gelilaohuang 我没理解,点击的时候赋值 value 进去了,然后你又写了一个鼠标悬浮事件是赋值 vlaue
现在没搞明白你的 mouseenter 是做什么用的,可以加我私聊现在有点闲 emlzaHVtZQ==
chingyat
2023-11-27 16:43:54 +08:00
react 的受控组件也可以这么操作吗?
corcre
2023-11-27 16:46:09 +08:00
是不是控件数据不是在 dom 里面而是另外定义的变量去记录的, 然后 hover 的时候按照内存里面的数据把 dom 刷新了, 不然这里看不到有什么动作会触发清空这个操作
chingyat
2023-11-27 16:51:19 +08:00
这个网页是用 react 写的吗?
gelilaohuang
2023-11-27 17:02:59 +08:00
@chingyat 盲猜是的,或者有没有搞 tiktok 商家后台的同学来说一下你们这个要在前台怎么赋值
gelilaohuang
2023-11-27 17:07:01 +08:00
@corcre 尝试清掉 table 、tr 的所有事件,仍然无果放弃😄
chingyat
2023-11-27 17:08:26 +08:00
lisxour
2023-11-27 17:17:22 +08:00
很明显这个 input 双向绑定了
gelilaohuang
2023-11-27 17:32:47 +08:00
@chingyat 谢谢,我一会儿尝试下看看结果再来反馈
Doctorwu
2023-11-27 17:37:16 +08:00
看上去是鼠标放上去触发 re-render 了, 然后 Input 的值被清除回了内存中保存的变量
wangtian2020
2023-11-27 18:08:25 +08:00
试试看把完整流程都写进脚本里:聚焦输入框、输入值、取消聚焦
gelilaohuang
2023-11-27 19:02:30 +08:00
```
function setNativeValue (element, value) {
// Get the original value setter of the element
let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
// Set the new value using the native setter
nativeInputValueSetter.call(element, value);
// Create a new input event with the target element and bubbles flag
let event = new Event("input", { target: element, bubbles: true });
// Add a simulated flag to the event for React 15 compatibility
event.simulated = true;
// Dispatch the event to the element
element.dispatchEvent(event);
}
```
用这个搞定了,感谢大家的关注
realJamespond
2023-11-28 10:49:15 +08:00
绑定的模拟输入吧,触发 onchange 事件赋值

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/995608

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX