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

2022-05-19 01:17:03 +08:00
 kkkiio

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

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

1117 次点击
所在节点    前端开发
5 条回复
jifengg
2022-05-19 09:40:31 +08:00
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
2022-05-19 09:42:20 +08:00
https://codepen.io/marcong95/pen/YzeVVLw?editors=1111

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

非常感谢!

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

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

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

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

© 2021 V2EX