Mac系统下区分中文输入法回车与提交事件

最新推荐文章于 2024-05-26 10:01:33 发布

草晚晴

最新推荐文章于 2024-05-26 10:01:33 发布

阅读量612

点赞数 1

分类专栏：前端学习文章标签： macos 前端 javascript typescript react.js reactjs

本文链接：https://blog.csdn.net/weixin_44032595/article/details/134260982

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

总的来说，常见的方式大致有以下三种：

在keydown事件中使用isComposing属性判断是否为输入法下的回车。event.isComposing 属性在用户编辑文本时（例如输入中文时）会被设为 true，并在文本编辑完成时被设为 false（例如用户按下回车键选择了一个中文词汇）。
使用keydown事件中的keyCode来判别：在中文输入法时按下enter时，keyCode为229，在不是中文输入法，使用英文直接输入的情况下，keyCode为13。
通过compositionstart和compositionend事件来设定标志来判断。当用户开始使用输入法时，compositionstart会被触发，可以在这个时候设置一个标志变量为true，并在compositionend事件触发时将其设回false。然后，在keydown事件中检查这个变量，如果标志为true，则用户仍在使用输入法，回车可能是用于选择输入法建议的词汇，而不是提交表单。

1、在纯JavaScript环境下，多用前两种方式通过监听键盘事件并判断当前输入法的状态来实现。以下为可运行示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Enter Key with Chinese IME</title>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('text-input').addEventListener('keydown', function(event) {
    console.log(event);
    if (event.key === 'Enter') {
      if (event.isComposing || event.keyCode === 229) {
        console.log('正在使用中文输入法输入。');
      } else {
        console.log('不是中文输入法，或者已经提交中文输入。');
      }
    }
  });
});
</script>
</head>
<body>
<input type="text" id="text-input" placeholder="在此处测试输入法回车键">
</body>
</html>

对比如下图所示：
中文输入法下的enter事件不是中文输入法
对于第三种方式的js实现补充如下：

let isIMEComposing = false;

// 监听开始输入法编辑
document.addEventListener('compositionstart', function(event) {
  isIMEComposing = true;
});

// 监听输入法编辑结束
document.addEventListener('compositionend', function(event) {
  isIMEComposing = false;
});

// 监听按键事件
document.addEventListener('keydown', function(event) {
  console.log(event);
  if (event.key === 'Enter' && !isIMEComposing ) {
    // 阻止默认的回车行为，例如表单提交或换行
    event.preventDefault();
    // 执行相应操作逻辑
  }
});

// 在相应的文本输入元素上设置这些事件监听器

2、在React的环境下的实现和原生 JavaScript 事件监听有一些不同。以下为参考示例：

const [isIMEComposing, setIsIMEComposing] = useState(false);

const handleCompositionStart = () => {
  setIsIMEComposing(true);
};

const handleCompositionEnd = () => {
  setIsIMEComposing(false);
};

const handleKeyDown = async (event) => {
  // 检查是否为回车键且不是输入法的组合键输入和没有按住shift键
  if (event.key === 'Enter' && !isIMEComposing && !event.shiftKey) {
    // 阻止默认的回车行为，例如表单提交或换行
    event.preventDefault(); 
    // 执行相应操作逻辑
  }
};

// 在JSX中
<textarea
  onCompositionStart={handleCompositionStart}
  onCompositionEnd={handleCompositionEnd}
  onKeyDown={handleKeyDown}
  // 其他属性...
/>