JavaScript聊天框插入表情: 点击表情时输入框失焦, 无法插入到输入框.

原创

已于 2022-08-30 17:05:54 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #聊天框/表情 #Chat

于 2022-08-30 16:15:52 首次发布

本文介绍了一种解决网页聊天应用中表情输入导致输入框失焦的问题方法，并提供了详细的实现步骤及源代码。

文章目录

Preface

最近在尝试做一个聊天框，但是在我做表情插入的时候被一个问题卡住了。
表情是使用的 img 标签;
本次最大问题就是: 点击表情时输入框失焦, 无法插入到输入框.

问题原因

当点击表情的时候, 输入框失去焦点, 聚焦到点击的标清处或失去焦点.

我尝试过点击的时候, 聚焦到输入框, 但是又出现了聚焦位置问题...  真是一波三折

解决问题

一开始做的时候, 我一直有个简单的解决思路, 但是我就是没去尝试. 就去搜索各种问题和解决办法.
最后还是妥协了

解决思路 : 既然是因为点击表情的时候, 焦点聚焦到表情选择了, 那我就不让表情选择框不能选中. 👍🏻 还真管用了.

给输入框加这个样式就可以解决, 如果要做兼容记得添加属性前缀 -webkit- 等…

.input {
   
   
	user-select: none;
}

效果:
请添加图片描述

源代码

<!doctype html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/index.css" />
  <style>
    .emoji-box {
     
     
	  width: 300px;
	  user-select: none;
	}
	.emoji-box .emoji {
     
     
	  display: inline-block;
	  padding: 3px;
	}

最低0.47元/天解锁文章