V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kkkiio
V2EX  ›  前端开发

为什么全角方括号 [会先改变 textarea 的内容才触发 keydown 事件?

  •  
  •   kkkiio ·
    KKKIIO · 2022-05-19 01:17:03 +08:00 · 1321 次点击
    这是一个创建于 901 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在写编辑器,在有文本被选中的情况下按方括号[,无论半角还是全角,我都希望能在选中文本两边各添加"[""]"。

    我在通过监听 keydown 事件实现这个功能,但我发现输入全角方括号 [时,textarea 的内容会先添加全角方括号 [,然后才触发 keydown (通过 Chrome 断点观察到)。

    5 条回复    2022-05-19 11:23:21 +08:00
    jifengg
        1
    jifengg  
       2022-05-19 09:40:31 +08:00   ❤️ 1
    var t=document.getElementById('reply_content');
    t.onkeydown=(e)=>{
    console.log('keydown',e,t.value);
    }
    t.oninput=(e)=>{
    console.log('input',e,t.value);
    }


    以上用 V2EX 的回复框做测试,keydown 里面的 t.value 是按下按键之前的内容,input 是按下之后的内容。
    而且,“全角方括号”是“ [”,再而且,“[”只是一个简单的符号,你的问题,输入任何按键应该都是同样的效果。
    marcong95
        2
    marcong95  
       2022-05-19 09:42:20 +08:00
    https://codepen.io/marcong95/pen/YzeVVLw?editors=1111

    似乎并没有这种情况,有没有一种可能是你的框架或者代码把原生的 DOM 事件包了一层,导致你的回调函数调用浏览器已经把字符插进去了
    marcong95
        3
    marcong95  
       2022-05-19 10:00:28 +08:00   ❤️ 1
    @marcong95 #2 突然意识到你说的是全角方括号,那有可能是输入法的问题,现在的输入法有个什么内嵌编码的模式,会把你打的拼音啥的先放到输入框里。我用 win10 自带拼音,按任意字母,断点的时候确实也有该字母显示在输入框里,但是输出的 e.target.value 是不包括该字母的
    kkkiio
        4
    kkkiio  
    OP
       2022-05-19 10:42:14 +08:00
    v2ex 不知道为什么会把全角方括号替换成普通的半角方括号
    kkkiio
        5
    kkkiio  
    OP
       2022-05-19 11:23:21 +08:00
    @marcong95 确实只是输入框里显示了 [,listener 里`window.getSelection().toString()`还是能拿到之前的选中文本,看来我被屏幕骗了,查错方向了。

    非常感谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1197 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:23 · PVG 02:23 · LAX 10:23 · JFK 13:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.