Question

我有一个可编辑的div，它应该在键入时替换表情符号键。还有一个隐藏的textarea，应该有原始数据，但我不知道这应该如何工作。我用这个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的新手。但这不是我们的问题。你想用表情符号构建一个聊天系统。也不是问题。你需要重新考虑你的方法。

在该阶段使用图像表情符号，请使用ready-html表情符号。看看Emoticons HTMl。它们是准备好的表情符号，可以像文本一样配置。您可以复制粘贴并使用字母完成所有其他工作人员。如果你看到每个表情符号都有一个值（例如＆amp;＃128512;）（现在试试..复制并粘贴一个表情符号。哦，这里是一个..?）你也可以指定颜色，字体大小等值css就像它是LETTERS（我提到了吗？;）
现在编写脚本部分。使用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的输入文本。现在要处理按键输入，它将发送您的消息，您可以在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

Answer 2

现在我几乎解决了我的问题：

var emotifyText = function(e) {
            var caretPosition = getCaretPosition(this);
            var images = [];
            var i = 0;
            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#acompose_message').html(emotifyVal);
            $.each($('#acompose_message img'), function(index){
                console.log(i);
                $(this).replaceWith(function(){
                    return jQuery.inArray( $(this).attr('src'), jsonIcons );
                });
                i++;
            });

            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#compose_message').val(val);
            $('#acompose_message').html(emotify(val));
    };

但是$(this).replaceWith(function(){的行不起作用，现在我的问题是，有人知道我怎么能用另一个字符串替换我的div中的每个img？

表情符号，textarea与原始和textfield替换图标

2 个答案: