回车发送功能(区分输入法回车和普通回车以及shift+回车换行功能)

需求

用户在输入框内输入完成后,点击回车键或者发送按钮发送信息,通过shift+回车键换行。

难点

如果简单的以code === 'Enter'作为发送事件的条件,在中文输入拼音阶段,直接点击回车仍会触发发送事件。

思路

  1. 监听输入框的键盘事件
  2. 判断按键为回车键
    1. 当不是中文输入回车且没有同时按 'shift'键时,触发发送事件

一、区分输入法回车

我们首先要了解一下键盘事件,键盘事件有哪些?

keydown/keyup

当我们按下'enter'键事件返回以下内容

当我们在中文输入过程中(输入拼音但未选择的时候)按下'enter'键

此时我们应该发现了这个关键的keyprocess 代表'The Process key. Instructs the IME to process the conversion.'(过程密钥。指示输入法处理转换。),由此我们可以通过key === 'Process'来区分普通'enter'和输入法时'enter'。

二、如何确定 shift + 回车

到现在我们已经可以区分普通回车和输入法回车,哪如何shift+回车换行呢?

仍然是回车时间返回的参数,当我同时按下shift+回车,返回以下内容,会返回两个键的信息,一个是shift键,一个是enter键的信息,我们看enter键的信息也就是第二个,注意shiftKey,它表示事件触发时 shift 键是 (true) 否 (false) 按下。

由此我们可以知道通过shiftKey可以判断回车时是否同时按shift键。

注意:

到现在我们已经可以实现需求了,但是还有一个坑,键盘事件需要选择keydown而不是keyupkeyup事件内去阻止浏览器默认事件是不行的,也就是说 enter 依旧换行。

代码示例为vue + element示例,其他框架思想一样暂且不表。

xml 复制代码
<template>
  <div>
      <el-input
        v-model="content"
        @keydown="contentKeyDown"></el-input>
  </div>
<template>

<script setup>
  import { ref } from "vue";
  const content = ref('')
  // 按键事件,enter输入
  const contentKeyDown = (e) => {
  	const { code, key, shiftKey } = e
    if (code === 'Enter') {
      // key === Process 输入法按键
      if (key !== 'Process' && !shiftKey) { // shift + enter 换行
        e.preventDefault() // 阻止浏览器默认时间,不换行
        sendMsg(content.value) // 发送事件
      }
    }
	}
  // 发送事件
  const sendMsg = () => {
    // ...
  }
</script>

完结。

参考:

MND-KeyboardEvent

MDN-keyvalues

相关推荐
【ql君】qlexcel23 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE23 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子27 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构