网页里有办法区分输入法的换行和发送按钮事件吗

2 天前
 rizon

像微信输入法等手机输入法,是怎么处理换行和发送两个按钮事件的呀。 在网页端有办法处理吗,事件里塞了什么标记呀

1704 次点击
所在节点    程序员
11 条回复
ns09005264
2 天前
Firefox 和 Chrome 都支持远程调试,直接在电脑上调试手机上的网页,你给 input 加上相关的监听事件,打印该事件就知道按了什么键发送了什么 key 或 buttons
festoney8
1 天前
以搜狗为例,在不同场景下回车键会显示不同功能,比如 回车/搜索/开始/下一步,在网页内对于会自动判断 input type 或 textarea
rizon
1 天前
@ns09005264 还能远程调试手机端的 chrome ? 我居然不知道 。需要 usb 或者 wifi 局域网吗?
bsfx2
1 天前
94
1 天前
没有用其他输入法,单单从系统自带的输入法里面没看到 key 和 code 有差异,可能 KeyCode 会有差异?

可能如 zxx 这篇文章中说的改造成 form 表单上面的事件监听,让浏览器自己判断会好一些?
[奇了怪了,输入法和 JS Enter 回车提交冲突 « 张鑫旭-鑫空间-鑫生活]( https://www.zhangxinxu.com/wordpress/2023/02/js-enter-submit-compositionupdate/)
PaulSamuelson
1 天前
你是不是想问这个? https://juejin.cn/post/7330255976506081321
要区分用户直接输入 Enter ,还是在 `isComposing` 输入法内输入的 Enter
wentx
1 天前
Enter

Shift+Enter

一个发送,一个换行
skallz
1 天前
参考飞书等工具,没必要区分,用 shift+enter 换行,因为如果你擅自做了区分,反而会给用户造成困惑,同一个按键会出现不同的功能
bowencool
1 天前
@ns09005264 safari 也可以
fuyun
1 天前
输入法状态监听:

```typescript
ngAfterViewInit() {
const $promptInput = this.promptInput?.nativeElement;

$promptInput.addEventListener('compositionstart', () => (this.inputFlag = true), false);
$promptInput.addEventListener('compositionend', () => (this.inputFlag = false), false);
}
```
codehz
1 天前
键盘显示什么不是看你 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint 里指定了什么吗()
然后操作都是发送换行,另外这玩意不一定能被 composition 事件捕获,除非用户是在输入拼音没上屏的时候按的回车(然而手机输入法还不一定会把这个回车发给浏览器,而是直接上屏了)

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

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

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

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

© 2021 V2EX