V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
gelilaohuang
V2EX  ›  JavaScript

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

  •  
  •   gelilaohuang · 2023-11-27 15:30:11 +08:00 · 1622 次点击
    这是一个创建于 391 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用在油猴脚本里,我试了很多网页的 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)
        }
    }
    
    
    15 条回复    2023-11-28 10:49:15 +08:00
    shuxhan
        1
    shuxhan  
       2023-11-27 15:51:33 +08:00
    下面报错,改成这样可以正常运行

    if (e) {
    $(e).trigger(evType);
    }
    gelilaohuang
        2
    gelilaohuang  
    OP
       2023-11-27 16:20:16 +08:00
    @shuxhan 改成 trigger 也一样,好像遇到疑难杂症了一样,鼠标一滑在表格上里面值就被清空了,我录了个视频演示
    https://imgur.com/a/LHsBRuw
    shuxhan
        3
    shuxhan  
       2023-11-27 16:24:50 +08:00
    @gelilaohuang 我没理解,点击的时候赋值 value 进去了,然后你又写了一个鼠标悬浮事件是赋值 vlaue
    现在没搞明白你的 mouseenter 是做什么用的,可以加我私聊现在有点闲 emlzaHVtZQ==
    chingyat
        4
    chingyat  
       2023-11-27 16:43:54 +08:00 via iPhone
    react 的受控组件也可以这么操作吗?
    corcre
        5
    corcre  
       2023-11-27 16:46:09 +08:00
    是不是控件数据不是在 dom 里面而是另外定义的变量去记录的, 然后 hover 的时候按照内存里面的数据把 dom 刷新了, 不然这里看不到有什么动作会触发清空这个操作
    chingyat
        6
    chingyat  
       2023-11-27 16:51:19 +08:00 via iPhone
    这个网页是用 react 写的吗?
    gelilaohuang
        7
    gelilaohuang  
    OP
       2023-11-27 17:02:59 +08:00
    @chingyat 盲猜是的,或者有没有搞 tiktok 商家后台的同学来说一下你们这个要在前台怎么赋值
    gelilaohuang
        8
    gelilaohuang  
    OP
       2023-11-27 17:07:01 +08:00
    @corcre 尝试清掉 table 、tr 的所有事件,仍然无果放弃😄
    chingyat
        9
    chingyat  
       2023-11-27 17:08:26 +08:00
    lisxour
        10
    lisxour  
       2023-11-27 17:17:22 +08:00
    很明显这个 input 双向绑定了
    gelilaohuang
        11
    gelilaohuang  
    OP
       2023-11-27 17:32:47 +08:00
    @chingyat 谢谢,我一会儿尝试下看看结果再来反馈
    Doctorwu
        12
    Doctorwu  
       2023-11-27 17:37:16 +08:00
    看上去是鼠标放上去触发 re-render 了, 然后 Input 的值被清除回了内存中保存的变量
    wangtian2020
        13
    wangtian2020  
       2023-11-27 18:08:25 +08:00
    试试看把完整流程都写进脚本里:聚焦输入框、输入值、取消聚焦
    gelilaohuang
        14
    gelilaohuang  
    OP
       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
        15
    realJamespond  
       2023-11-28 10:49:15 +08:00
    绑定的模拟输入吧,触发 onchange 事件赋值
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2926 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 13:53 · PVG 21:53 · LAX 05:53 · JFK 08:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.