输入表情

前言

将表情做成图片，在聊天弹框中输入表情。

1.完整案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <title>Title</title>
    <style>
        .send-message-popup-min {
             width: 300px;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             color: #323232;
             border: 8px solid rgba(0, 0, 0, 0.1);
         }
        .chat-news-content {
            height: 250px;
            width: 100%;
            overflow: auto;
        }
        .news-other-group, .news-self-group {
            padding: 6px;
            display: flex;
            display: -webkit-flex;
        }
        .news-other-group {
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
        }
        .news-self-group {
            justify-content: flex-end;
            -webkit-justify-content: flex-end;
        }
        .self-msg, .other-msg {
            width: 80%;
            position: relative;
        }
        .self-msg {
            text-align: right;
        }
        .other-reply, .self-reply {
            display: inline-block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #fff;
            margin: 0 15px;
            line-height: 30px;
            padding: 5px 10px;
            word-wrap: break-word;
            max-width: 170px;
            white-space: pre-line;
        }
        .other-reply {
            text-align: left;
            box-shadow: 0 0 2px #ddd;
        }
        .self-reply {
            text-align: left;
            background-color: #ead66a;
            box-shadow: 0 0 2px #bbb;
        }
        .other-img, .self-img {
            width: 40px;
            height: 40px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        i.triangle-other, i.triangle-self {
            width: 0;
            height: 0;
            position: absolute;
            top: 12px;
            display: inline-block;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        i.triangle-other {
            left: 8px;
            border-right: 8px solid #fff;
        }
        i.triangle-self {
            right: 8px;
            border-left: 8px solid #ead66a;
        }
        .send-message-main .chat-input {
            padding: 0 10px 10px;
            border-top: 1px solid #ccc;
        }
        .chat-input-field .input-field-box {
            width: 100%;
            height: 36px;
            margin-left: auto;
            margin-right: auto;
            padding: 8px;
            outline: 0;
            font-size: 14px;
            line-height: 24px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .chat-input-emoji {
            position: relative;
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
        }
        .chat-input-emoji .chat-input-emoji-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("images/emoji.png") no-repeat center;
            -webkit-background-size: 32px 32px;
            background-size: 32px 32px;
            vertical-align: middle;
        }
        .chat-input-btn {
            float: right;
            width: 62px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: #e2333f;
            cursor: pointer;
        }
        /*解决IE浏览器隐藏滚动条的问题*/
        .input-field-box {
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }
        .input-field-box::-webkit-scrollbar {
            width: 0px
        }
        #like-sign-list{
            width: 200px;
            height: 160px;
            background: #ffffff;
            position: absolute;
            top: -176px;
            left: 0;
            text-align: left;
            border-radius: 5px;
            border: solid 1px #c5c5c5;
            display: none;
            overflow: auto;
        }
        #like-sign-list::before{
            content: '';
            position: absolute;
            border-top: solid 7px #c5c5c5;
            border-left: solid 9px transparent;
            border-right: solid 9px transparent;
            bottom: -7px;
            right: 36px;
        }
        #like-sign-list::after{
            content: '';
            position: absolute;
            border-top: solid 7px #fff;
            border-left: solid 10px transparent;
            border-right: solid 10px transparent;
            bottom: -5px;
            right: 35px;
        }
        #like-sign-list>ul{
            margin: 0;
            width: 200px;
            height: 160px;
            padding: 3px 2px;
            list-style: none;
        }
        #like-sign-list>ul>li{
            float: left;
            height: 30px;
            margin-left: 2px;
        }
        .emoji-box img {
            display: inline-block;
            width: 40px;
            height: 40px;
            padding: 5px;
        }
        .other-reply img,.self-reply img,.input-field-box img{
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="send-message-popup-min">
    <div class="send-message-main">
        <div class="chat-news-content">
            <div class="news-self-group">
                <div class="self-msg">
                    <span class="self-reply">你现在在干嘛</span>
                    <i class="triangle-self"></i>
                </div>
                <a href="javascript: void(0);">
                    <img class="self-img" src="images/author-avatar.png">
                </a>
            </div>
            <div class="news-other-group">
                <a href="javascript: void(0);">
                    <img class="other-img" src="images/live-avatar.png">
                </a>
                <div class="other-msg">
                    <i class="triangle-other"></i>
                    <span class="other-reply">工作呢，你最近咋样?</span>
                </div>
            </div>
        </div>
        <div class="chat-input">
            <div class="chat-input-emoji"><i class="chat-input-emoji-icon" id="likeSign"></i>
                <div class="emoji-box" id="like-sign-list"></div>
            </div>
            <div class="chat-input-field">
                <div class="input-field-box" contenteditable="true"></div>
            </div>
            <div class="chat-input-operate clearfix">
                <div class="chat-input-btn">发表</div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".chat-input-btn").on("click",function () {
            var inputSelfVal = $(this).parents(".chat-input").find(".input-field-box").html();
            if (inputSelfVal != '') {
                var cloneSelfGroup = '<div class="news-self-group">' +
                    '        <div class="self-msg">' +
                    '            <span class="self-reply">' + inputSelfVal + '</span>' +
                    '            <i class="triangle-self"></i>' +
                    '        </div>' +
                    '        <img class="self-img" src="images/author-avatar.png"/>' +
                    '    </div>';
                $(this).parents(".send-message-main").find(".chat-news-content").append(cloneSelfGroup);
                $(this).parents(".chat-input").find(".input-field-box").html("");
            }
//                如何让发送的新消息最新显示
            $('.chat-news-content').scrollTop( $('.chat-news-content')[0].scrollHeight );
        })
        //表情
        var emotions = [
            '001', '002', '003', '004'
        ];
        $("#likeSign").on("click",function () {
            var emojiBox = $(this).parent(".chat-input-emoji").find("#like-sign-list");
            emojiBox.toggle();
            var html = "";
            for (var i = 0; i < emotions.length; ++i) {
                html += '<span><img src="images/' + emotions[i] + '.png"></span>';
            }
            emojiBox.html(html);
            var value = '';
            $("#like-sign-list img").click(function () {
                value += $(this).parent().html();
                $(this).parents(".chat-input").find(".input-field-box").html(value);
                return false;
            });
            return false;
        })
        $(document).click(function () {
            $('.emoji-box').hide();
        })

        // 刷新让滚动条显示在最底部
        $('.chat-news-content').scrollTop( $('.chat-news-content')[0].scrollHeight );
    })
</script>
</body>
</html>

2.重点

图片的命名方式和数组emotions相对应。

1
2
3
var emotions = [
   '001', '002', '003', '004'
];

如图所示：

然后通过for循环，让所有表情在表情弹框中显示，鼠标点击哪个表情，哪个表情显示在输入框中。

补充

需要解决的问题：

1.使用div的contenteditable属性来模拟textarea标签的功能，移动端兼容性不好（兼容性可查caniuse ）；

2.因此，在移动端只好使用textarea，但是textarea标签只能显示文本，而不能显示图片。同时textarea输入多行时会显示滚动条。

解决方法：

如何解决textarea输入多行时会显示滚动条的问题？

解决方法：在textarea标签外用一个div包裹，将textarea的宽度（width+padding）设置的div（width）比大17-20像素，并且div设置overflow:hidden; 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.chat-input-field{
          width: 280px;
          height: 48px;
          overflow: hidden;
      }
      .chat-input-field textarea{
          width: 266px;
          height: 42px;
          border: none;
          color: #323232;
          font-size: 20px;
          line-height: 30px;
          padding: 5px 20px 5px 10px;
          outline: none;
      }
<div class="chat-input-field">
           <textarea></textarea>
      </div>

如何解决textarea标签只能显示文本，而不能显示图片的问题？

解决方法：在textarea显示时，将每一个表情用一个代号表示。给img标签外面的span标签自定义一个属性，然后将这个自定义属性的值作为表示表情的代号，显示在textarea中。最后，要显示时，又将代号转换为img标签。

首先，给img标签外面的span标签自定义一个属性data-href:

1
2
3
for (var i = 0; i < emotions.length; ++i) {
  	emojiStr += '<span data-href="' + emotions[i] + '"><img src="img/' + emotions[i] + '.png"></span>';
}

注意：之前一直获取不到自定义属性data-href，原因是没有给data-href用双引号包裹住

错误代码如下：

1
2
3
4
var emojiStr = '';
for(var i=0;i<emotions.length;i++){
   emojiStr += '<span data-herf='+emotions[i] +'> <img src="images/'+ emotions[i]+ '.png"></span>';
}

然后，将这个自定义属性的值作为表示表情的代号，显示在textarea中：

1
2
3
4
5
var value = '';
var dataHref = $(this).parent('span').data("href");
value += "[" + dataHref + "]";
var result= $(".chat-input-field  textarea").val() + value;
$(".chat-input-field  textarea").val(result);

最后，将代号转换为img标签。

1
2
var sendContentBefore = $(".chat-input-field textarea").val();
var sendContent = sendContentBefore.replace(/\[(\d\d\d)\]/g, "<img class='em' src='images/$1.png'>");

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" href="css/personalCenter.css">-->
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <title>Title</title>
    <style>
        .send-message-popup-min {
             width: 300px;
             -webkit-border-radius: 2px;
             -moz-border-radius: 2px;
             border-radius: 2px;
             color: #323232;
             border: 8px solid rgba(0, 0, 0, 0.1);
         }
        .chat-news-content {
            height: 250px;
            width: 100%;
            overflow: auto;
        }
        .news-other-group, .news-self-group {
            padding: 6px;
            display: flex;
            display: -webkit-flex;
        }
        .news-other-group {
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
        }
        .news-self-group {
            justify-content: flex-end;
            -webkit-justify-content: flex-end;
        }
        .self-msg, .other-msg {
            width: 80%;
            position: relative;
        }
        .self-msg {
            text-align: right;
        }
        .other-reply, .self-reply {
            display: inline-block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #fff;
            margin: 0 15px;
            line-height: 30px;
            padding: 5px 10px;
            word-wrap: break-word;
            max-width: 170px;
            white-space: pre-line;
        }
        .other-reply {
            text-align: left;
            box-shadow: 0 0 2px #ddd;
        }
        .self-reply {
            text-align: left;
            background-color: #ead66a;
            box-shadow: 0 0 2px #bbb;
        }
        .other-img, .self-img {
            width: 40px;
            height: 40px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        i.triangle-other, i.triangle-self {
            width: 0;
            height: 0;
            position: absolute;
            top: 12px;
            display: inline-block;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        i.triangle-other {
            left: 8px;
            border-right: 8px solid #fff;
        }
        i.triangle-self {
            right: 8px;
            border-left: 8px solid #ead66a;
        }
        .send-message-main .chat-input {
            padding: 0 10px 10px;
            border-top: 1px solid #ccc;
        }
        .chat-input-field{
            width: 280px;
            height: 48px;
            overflow: hidden;
        }
        .chat-input-field textarea{
            width: 266px;
            height: 42px;
            border: none;
            color: #323232;
            font-size: 20px;
            line-height: 30px;
            padding: 5px 20px 5px 10px;
            outline: none;
        }
        .chat-input-emoji {
            position: relative;
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
        }
        .chat-input-emoji .chat-input-emoji-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("images/emoji.png") no-repeat center;
            -webkit-background-size: 32px 32px;
            background-size: 32px 32px;
            vertical-align: middle;
        }
        .chat-input-btn {
            float: right;
            width: 62px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: #e2333f;
            cursor: pointer;
        }

        .emoji-box{
            width: 200px;
            height: 160px;
            background: #ffffff;
            position: absolute;
            top: -176px;
            left: 0;
            text-align: left;
            border-radius: 5px;
            border: solid 1px #c5c5c5;
            display: none;
            overflow: auto;
        }
        .emoji-box>ul{
            margin: 0;
            width: 200px;
            height: 160px;
            padding: 3px 2px;
            list-style: none;
        }
        .emoji-box>ul>li{
            float: left;
            height: 30px;
            margin-left: 2px;
        }
        .emoji-box img {
            display: inline-block;
            width: 40px;
            height: 40px;
            padding: 5px;
        }
        .other-reply img,.self-reply img,.input-field-box img{
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="send-message-popup-min">
    <div class="send-message-main">
        <div class="chat-news-content">
            <div class="news-self-group">
                <div class="self-msg">
                    <span class="self-reply">你现在在干嘛</span>
                    <i class="triangle-self"></i>
                </div>
                <a href="javascript: void(0);">
                    <img class="self-img" src="images/author-avatar.png">
                </a>
            </div>
            <div class="news-other-group">
                <a href="javascript: void(0);">
                    <img class="other-img" src="images/live-avatar.png">
                </a>
                <div class="other-msg">
                    <i class="triangle-other"></i>
                    <span class="other-reply">工作呢，你最近咋样?</span>
                </div>
            </div>
        </div>
        <div class="chat-input">
            <div class="chat-input-emoji">
                <i class="chat-input-emoji-icon"></i>
                <div class="emoji-box">ssss</div>
            </div>
            <div class="chat-input-field">
                <textarea></textarea>
            </div>
            <div class="chat-input-operate clearfix">
                <div class="chat-input-btn">发表</div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var emotions = [
            '001', '002', '003', '004'
        ];
        $(".chat-input-emoji-icon").on("click",function () {
            $(".emoji-box").toggle();
            var emojiStr = "";
            for (var i = 0; i < emotions.length; ++i) {
                emojiStr += '<span data-href="' + emotions[i] + '"><img src="img/' + emotions[i] + '.png"></span>';
            }
            $(".emoji-box").html(emojiStr);
            selectEmoji();
            return false;
        })

        function selectEmoji() {
            $(".emoji-box img").on("click",function () {
                var value = '';
                var dataHref = $(this).parent('span').data("href");
                value += "[" + dataHref + "]";
                var result= $(".chat-input-field  textarea").val() + value;
                $(".chat-input-field  textarea").val(result);
                return false;
            })
        }
        
        $(".chat-input-btn").on("click",function () {
            var sendContentBefore = $(".chat-input-field textarea").val();
            var sendContent = sendContentBefore.replace(/\[(\d\d\d)\]/g, "<img class='em' src='images/$1.png'>");
            if(sendContent != ''){
                var sendStr = '<div class="news-self-group">' +
                    '                <div class="self-msg">' +
                    '                    <span class="self-reply">'+ sendContent +'</span>' +
                    '                    <i class="triangle-self"></i>' +
                    '                </div>' +
                    '                <a href="javascript: void(0);">' +
                    '                    <img class="self-img" src="images/author-avatar.png">' +
                    '                </a>' +
                    '            </div>';
                $(".chat-news-content").append(sendStr);
                $('.chat-news-content').scrollTop( $('.chat-news-content')[0].scrollHeight );
                $(".chat-input-field textarea").val('');
            }
            return false;
        })
        
        $(document).on("click",function () {
            $(".emoji-box").hide();
        })
        
        // 刷新让滚动条显示在最底部
        $('.chat-news-content').scrollTop( $('.chat-news-content')[0].scrollHeight );

    })
</script>
</body>
</html>
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>