【问题来了】HTML怎么实现@功能与emoji表情功能的输入框

最新推荐文章于 2021-06-10 15:13:39 发布

小飞快跑

最新推荐文章于 2021-06-10 15:13:39 发布

阅读量1.7k

点赞数 4

分类专栏：问题来了文章标签： css javascript html jquery

本文链接：https://blog.csdn.net/weixin_41354371/article/details/115556643

版权

问题描述：

HTML怎么实现@功能与emoji表情功能的输入框，效果如下：
在这里插入图片描述

解决方案：

参照 github 上两个开源项目整合实现的
@功能：https://github.com/ichord/At.js
emoji表情功能：https://github.com/eshengsky/jQuery-emoji
直接上主要代码：

<html>
<title>HTML实现@功能与emoji表情功能的输入框</title>
<head>
<script type="text/javascript"  src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script  src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/atwho/jquery.atwho.css">
<link type="text/css" rel="stylesheet" href="css/emoji/jquery.emoji.css">
<script type="text/javascript"  src="js/atwho/jquery.caret.js" > </script>
<script type="text/javascript"  src="js/atwho/jquery.atwho.js" > </script>
<script type="text/javascript"  src="js/emoji/jquery.mousewheel-3.0.6.min.js" > </script>
<script type="text/javascript"  src="js/emoji/jquery.mCustomScrollbar.min.js" > </script>
<script type="text/javascript"  src="js/emoji/jquery.emoji.js" > </script>
<style type="text/css">
#content_in_messageWall{
    
    min-height: 141px;
	max-height: 141px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset;
    color: #555;
    display: block;
    font-size: 14px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
    width: 98%;
	overflow: auto;
}
/**给div加 placeholder  **/
div[contenteditable]:empty:before{
    
    content: attr(placeholder);
    color: #CCCCCC;
}
div[contenteditable]:focus{
    
    content:none;
}
.msg-list {
    
	margin-top: 20px;
}
.play-line {
    
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.msg-content .play-line {
    
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.push-msg-wrap{
    
    padding-left: 300px;
    padding-right

最低0.47元/天解锁文章

小飞快跑

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
【问题来了】HTML怎么实现@功能与emoji表情功能的输入框

问题描述：HTML怎么实现@功能与emoji表情功能的输入框，效果如下：解决方案：参照 github 上两个开源项目整合实现的@功能：https://github.com/ichord/At.jsemoji表情功能：https://github.com/eshengsky/jQuery-emoji直接上主要代码：<html><title>HTML实现@功能与emoji表情功能的输入框</title><head><script typ
复制链接

扫一扫

专栏目录