javascript - 表情符号，带有原始图标的文本区域和带有替换图标的文本字段

Question

我有一个可编辑的 div，它应该在输入时替换表情键。还有一个隐藏的文本区域，应该有原始数据，但我不知道这应该如何工作。我用这个library .
我的 jquery 代码:

         $('#acompose_message').keyup(function() {
                val = $('#acompose_message').html();
                document.getElementById('compose_message').innerHTML = val;
                emotifyVal = emotify(val);
                $('#acompose_message').html(emotifyVal);

        });

'#acompose_message' 是可编辑的 div，'#compose_message' 是隐藏的 div

Answer 1

看来你是初学js。但这不是我们的问题。你想建立一个带有表情符号的聊天系统。也不是问题。您只需要重新考虑您的方法。

1. 在该阶段不使用图像表情符号，而是使用 ready-html 表情符号。看这里Emoticons HTMl .它们是现成的表情符号，可以像文本一样配置。您可以复制粘贴并完成您使用字母所做的所有其他工作人员。如果你看到每个表情符号都有一个值(例如＆＃128512;)(现在试一试..复制并粘贴一个表情符号。哦，这是一个..😀)您还可以在css中指定颜色，字体大小等值就像它是 LETTERS(我提到过吗？;)
2. 现在是脚本部分。使用 Ready-Html 表情符号，您需要重新考虑您的 JavaScript 方法。你为什么不先做一个选择框来选择你的表情符号而不是转换文本？查看 Google-Hangout 和 Facebook 或 Skype。他们有一个面部按钮，可以向您显示面部。从那时起，您需要做的就是单击您喜欢的图像(在您的情况下为 Ready_Html 表情符号)，并将放置在您的文本输入中。然后您可以处理 on-enter 事件以将消息发送到其他客户端。

总结一下。像这样使用 Ready HTML 表情符号:

<div style="color: red; font-size: 18px; font-family: sans-serif;">&#128512; </div>

用户可以从弹出按钮中选择一个表情符号:这是一个图像示例:

这是一个典型的js代码:

对于表情按钮:

$('#emonicons').click(function() {
        if (emojis_isShown) {
            $('.spawn-emonicons').fadeOut(300);
            emojis_isShown = false;
        }
        else {
            $('.spawn-emonicons').fadeIn(300);
            emojis_isShown = true;
        }

});

对于实际的图标:

$('.ico').click(function() {
        var value = $(this).text();
        var input = $('#message-sender');
        input.val(input.val() + value + ' ');

});

在第二个代码中，当用户按下他想要的图标时，图标被转移到 ID 为 message-sender 的输入文本。现在要处理按键 enter ，这将发送您的消息，您可以在 JS 中使用以下伪函数。

 $('#message-sender').bind('keydown', function (event) {
         if(event.which === 13) {
            emojis_isShown = false;
            $('.spawn-emonicons').hide();
            var msg = $(this).val();
            var newdiv1 = '<div class="whatever">'+msg+'</div>'

               $( newdiv1 ).insertAfter( $( ".message" ).last());

         }
 });

上面的代码读取所有按键，当按下键 13(回车)时隐藏表情符号窗口。使用您键入的消息创建一个新的 div 并将其发送到前端。您还应该考虑使用 Ajax 将消息发送到“另一端”(Ops，我的意思是客户端)。

如果不能为您提供更多帮助，我深表歉意。聊天框系统是一项教学任务，不推荐给新程序员(谁说的？？？)

我最后想给你的是我在 dreamincode.com 上找到的关于构建简单聊天框的教程。从那开始。随着时间的推移，当你成为更好的程序员时，你会找到你寻求的解决方案!

教程(一个非常好的教程): Simple Text Chat Box