javascript - 请教下关于emoji在WEB输出的问题。

问题描述

问 题

在做一个web聊天室的应用，今天想加上发送emoji功能。写JS的过程中遇到两个问题。
问题一：在将遍历到的emoji图片加点击事件的时候，想先得到书写面板#write的文本内容，用getElementById得到是""，但是可以用$("#write").val()得到之前书写的内容；
问题二：如果在点击emoji之前有书写过内容，那么emoji打印不出来？

代码：（不好意思JS、Jquery一起用看着有点不舒服）

function clickEmoj(){//生成emoj与销毁
            var emojs = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '✌️', '?', '?', '?', '?', '?', '⚡️', '?', '?', '?', '⚽️', '❤️', '??'];
            $(".ybb-operate img").on('click',function(){
                // console.log((document.getElementsByClassName("emojsdiv"))[0]===undefined);
                if((document.getElementsByClassName("emojsdiv"))[0]===undefined){
                    var emojsdiv = document.createElement("div");
                    emojsdiv.setAttribute("class","emojsdiv");
                    for(let i=0;i<emojs.length;i++){
                        var temp1 = emojione.toImage(emojs[i]);
                        emojsdiv.innerHTML += temp1;
                    }
                    (document.getElementsByTagName("body"))[0].appendChild(emojsdiv);
                    var emojImgs = document.getElementsByClassName("emojione");
                    for(let emojImg of emojImgs){
                        emojImg.onclick = function(event){
                            $("#write").focus();
                            // var temp2 = document.getElementById("write").innerHTML;
                            //用JS提取不出id是write的文本内容，用jquery就可以？
                            var temp2 = $("#write").val();
                            console.log(temp2);
                            console.log(event.target.alt);
                            temp2 += event.target.alt;
                            document.getElementById("write").innerHTML = temp2;
                        }
                    }
                }else{
                    $(".emojsdiv").remove();
                }
                
            });
        }

解决方案

马丹，现在才发现textarea和input是需要用$("").val()或者document.getElementById("").value进行赋值。不能让用text()和innerHTML。

这篇关于javascript - 请教下关于emoji在WEB输出的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！