聊天框的“回车键陷阱”：当输入法遇上Safari倔脾气

聊天框的“回车键陷阱”：当输入法遇上Safari的倔脾气

你有没有经历过这样的尴尬时刻？正在用输入法认真组织语言，按下回车想确认选词，结果消息“咻”的一声就发出去了——半生不熟的句子，带着一堆拼音残骸，就这样赤裸裸地展现在对方面前。😅

以上真实发生在AI聊天输入框的Enter回车后...

一场键盘上的“误会”

想象一下：回车键就像是个热心的快递员。正常情况下，你写完消息按回车，它立马帮你打包发送，效率满分！但当你用输入法时，这个热心的快递员就变成了“急性子”——你明明还在装箱（选词），它就急着要把半成品送出去。 更让人头大的是：Safari浏览器里的这个快递员格外“叛逆”，常规的劝阻方法对它根本不管用！

我是如何“调教”这个叛逆的回车键的

第一回合：尝试讲道理

<textarea
    @keydown="onInputKeydown"
    placeholder="请输入内容，按 Enter 发送，Shift + Enter 换行"
></textarea>

const onInputKeydown = (event) => {
  if(event.key === 'Enter' || event.keyCode === 13) {
    if(event.shiftKey) return; // shift + enter 换行
    
    if(event.isComposing) return; // 输入法兄，你先忙
    
    event.preventDefault();
    sendMessage();
  }
}

第二回合：Safari的“我不听我不听”

没想到Safari直接装聋作哑——isComposing这个信号灯在Safari眼里形同虚设！

终极解决方案：给输入法装个“状态指示灯”

既然Safari不认通用的信号灯，那我就自己造一个！

<textarea
    @input="onInput"
    @keydown="onInputKeydown"
    placeholder="请输入内容，按 Enter 发送，Shift + Enter 换行"
></textarea>

import { UAParser } from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

// 手动造个“信号灯”
let isCompositionInputType = false;

const onInput = (event) => {
  // 检测是不是输入法在“说话”
  isCompositionInputType = [
    'insertCompositionText', 
    'insertFromComposition'
  ].includes(event.inputType);
}

const onInputKeydown = (event) => {
  if(event.key === 'Enter' || event.keyCode === 13) {
    if(event.shiftKey) return;
    
    // 针对Safari这个“叛逆少年”
    if(result.browser.name === 'safari') {
      if(isCompositionInputType) {
        isCompositionInputType = false; // 关掉信号灯
        return; // 输入法兄，您先请！
      }
    } else {
      if(event.isComposing) return;
    }
    
    event.preventDefault();
    sendMessage();
  }
}

成果展示

现在我们的聊天框终于变聪明了！你再也不用担心：

• 打拼音打到一半误发送
• 在Safari里遭遇“发送惊魂”
• 尴尬地解释那些未完成的句子

就像给快递员配了个对讲机：“客户还在包装，请稍等！”这个小改动让聊天体验从“心惊胆战”变成了“行云流水”。 下次当你愉快地敲击键盘时，也许可以会心一笑：有个“隐形保镖”正在默默守护你的聊天体验呢！✨