Question

我有文本字段和按钮。单击该按钮时，它将生成启用表情符号选择器的文本字段。我可以看到该按钮，但表情符号选择器未启用。

我的代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.emojiFace.js"></script>
  </head>

  <body>
    <form class="col-sm-12">

      <div id="textfields">
        <div id="entireText0">
          <div class="form-row">
            <div class="col-sm-10">
              <div class="form-group">
                <label for="textarea0">Question 1</label>
                <!--<textarea class="form-control" id="textarea0" rows="2"></textarea>-->
                <div class="containers">
                  <textarea rows="3" id="textarea0" class="form-control faceText" spellcheck="false"></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br><br>
      <button type="button" id="button0" class="btn btn-primary" onclick="addTextFields();">Add Questions</button>
    </form>


    <script>
      $(function() {
        $('.faceText').emojiInit({
          fontSize: 20,
          success: function(data) {},
          error: function(data, msg) {}
        });
      });

      textareaid = 0;
      addButtonid = 0;

      function addTextFields() {
        textareaid++;
        addButtonid++;
        var objTo = document.getElementById('textfields');
        var divtest = document.createElement("div");
        divtest.innerHTML = "<div id='textfields'><div id='entireText" + addButtonid + "'> <div class='form-row'> <div class='col-sm-10'> <div class='form-group'> <label for='textarea" + addButtonid + "'>Question " + (addButtonid + 1) + "</label> <div class='containers'><textarea rows='3' id='textarea" + addButtonid + "' class='form-control faceText' spellcheck='false'></textarea></div></div></div></div></div></div>";
        objTo.appendChild(divtest);
        $('.faceText').emojiInit();
      }

    </script>

  </body>

</html>

EmojiPicker代码（jquery.emojiFace.js）：

var option;
(function(c) {
  var d = "&#402 &#913 &#914 &#915 &#916 &#917 &#918 &#919 &#920 &#921 &#922 &#923 &#924 &#925 &#926 &#927 &#928 &#929 &#931 &#932 &#933 &#934 &#935 &#936 &#937 &#945 &#946 &#947 &#948 &#949 &#950 &#951 &#952 &#953 &#954 &#955 &#956 &#957 &#958 &#959 &#960 &#961 &#962 &#963 &#964 &#965 &#966 &#967 &#968 &#969 &#977 &#978 &#982 &#8226 &#8230 &#8242 &#8243 &#8254 &#8260 &#8472 &#8465 &#8476 &#8482 &#8501 &#8592 &#8594 &#8595 &#8596 &#8629 &#8656 &#8657 &#8658 &#8659 &#8660 &#8704 &#8706 &#8707 &#8709 &#8711 &#8712 &#8713 &#8715 &#8719 &#8721 &#8722 &#8727 &#8730 &#8733 &#8734 &#8736 &#8743 &#8744 &#8745 &#8746 &#8747 &#8756 &#8764 &#8773 &#8776 &#8800 &#8801 &#8804 &#8805 &#8834 &#8835 &#8836 &#8838 &#8839 &#8853 &#8855 &#8869 &#8901 &#8968 &#8969 &#8970 &#8971 &#9001 &#9002 &#9674 &#9824 &#9827 &#9829 &#9830".split(" ");
  c.fn.emojiInit = function(b) {
    option = c.extend({
      targetId: "",
      fontSize: 14,
      faceList: d,
      success: function(a) {},
      error: function(a, b) {}
    }, b);
    option.targetId = c(this).attr("id");
    b = c(this);
    if (void 0 == b || 0 >= b.length) option.error(null, "target object is undefined");
    else {
      option.fontSize = 20 < option.fontSize ? 20 : option.fontSize;
      option.fontSize = 14 > option.fontSize ? 14 : option.fontSize;
      var a = "";
      option.faceList.forEach(function(b) {
        a += "<div onclick='insertAtCaret(\"" + option.targetId + '","' + b + "\",this)' style='font: normal normal normal 14px/1 FontAwesome;cursor: pointer;padding:3px;font-size:" + option.fontSize + "px;width: 20px;display: inline-block;text-align:center;'>" + b + "</div>";
      });
      b.css("width", "100%");
      b.css("padding", "5px 30px 5px 5px");
      b.css("box-sizing", "border-box");
      b.css("resize", "vertical");
      b.parent().css("position", "relative");
      b.after("<div id='faceEnter' onclick='showFaceBlock()' style='padding: 5px;position: absolute;right: 0;top: 0;cursor: pointer;font: normal normal normal 14px/1 FontAwesome;'>+</div>");
      b.after("<div id='faceBlock' style='background:rgb(216, 216, 216);border-radius: 12px;display: none;position: absolute;border: 1px solid #e2e2e2;padding: 5px;right: -150px;top: 25px;width: 300px;'>" + a + "</div>");
      c(document).click(function() {
        c("#faceBlock").hide();
      });
      c("#faceBlock").click(function(a) {
        a.stopPropagation();
      });
      c("#faceEnter").click(function(a) {
        a.stopPropagation();
      })
    }
  }
})(jQuery);

function showFaceBlock() {
  $("#faceBlock").show();
}

function insertAtCaret(c, d, b) {
  try {
    $("#faceBlock").hide();
    var a = $("#" + c).get(0);
    if (document.all && a.createTextRange && a.caretPos) {
      var e = a.caretPos;
      e.text = "" == e.text.charAt(e.text.length - 1) ? d + "" : d;
    } else if (a.setSelectionRange) {
      var f = a.selectionStart,
        h = a.selectionEnd,
        k = a.value.substring(0, f),
        l = a.value.substring(h);
      a.value = k + d + l;
      a.focus();
      var g = d.length;
      a.setSelectionRange(f + g, f + g);
      a.blur();
    } else a.value += d;
    option.success(b);
  } catch (m) {
    option.error(b, m);
  }
};

我正在使用此表情符号选择器：

https://www.jqueryscript.net/text/Unicode-Emoji-Picker-jQuery-emojiFace.html

我可以为第一个文本区域启用表情符号选择器。但是，当动态生成文本区域时不能这样做。例如，“问题2”文本区域是动态生成的。

现在，我可以看到类似的内容。

Answer 1

您必须使用faceText类遍历每个html元素。试试这个；

$('.faceText').each(function(i,v){
  $(this).emojiInit({
     fontSize: 20,
     success: function(data) {},
     error: function(data, msg) {}
  });
});

在这里和那里移动了一些脚本，我没有注意到单击按钮时正在调用addTextFields；

<script>
      textareaid = 0;
      addButtonid = 0;

      function addTextFields() {
        textareaid++;
        addButtonid++;
        var objTo = document.getElementById('textfields');
        var divtest = document.createElement("div");
        divtest.innerHTML = "<div id='textfields'><div id='entireText" + addButtonid + "'> <div class='form-row'> <div class='col-sm-10'> <div class='form-group'> <label for='textarea" + addButtonid + "'>Question " + (addButtonid + 1) + "</label> <div class='containers'><textarea rows='3' id='textarea" + addButtonid + "' class='form-control faceText' spellcheck='false'></textarea></div></div></div></div></div></div>";
        objTo.appendChild(divtest);

        $('.faceText').each(function(i,v){
          if($(this).hasClass('done')){
            $(this).emojiInit({
             fontSize: 20,
             success: function(data) {},
             error: function(data, msg) {}
            });

            $(this).addClass('done');
          }
        });
      }
</script>

Answer 2

这是您自己的基于jQuery的表情符号选择器

 <div id="con">
  <!-- Component -->
  <div class="emojiPicker">
    <div class="emojis">
      <div class="emojiFrame"><span class="emoji">&#128540;</span></div>
      <div class="emojiFrame"><span class="emoji">&#128513;</span></div>
    </div>
  </div>
  <!-- Sample text input -->
  <div id="text">
    <textarea id="target"></textarea>
  </div>
</div>

脚本

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".emojiFrame").click(function(){
            // target, where emoji will be placed
            var target = $("#target");

            //emoji will be placed always at end of textbox
            target.text(target.text() + $(this).text());
        })
    })
</script>

样式

<style>
    /* page */
    body{
    box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    background-color: rgb(202, 193, 193);
    }
    #con{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    textarea {
    resize: none;
    margin-top: 10px;
    box-sizing: content-box;
    width: calc(100% - 6px);
    border: 1px solid black;
    }
    /* component */
    .emojiPicker{
    /* 5 emojis in row */
    /* width: 212px;  */

    /* 6 emojis in row */
    /* width: 254px; */

    /* 7 emojis in row */
    width: 296px;

    border: 1px solid #0d8cfc;
    background-color: aliceblue;

    -webkit-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
    }.emojis{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    }.emojiFrame{
    box-sizing: content-box;
    user-select: none;
    text-align: center;
    cursor: pointer;
    width: 30px;
    font-size: 21px;
    padding: 3px;
    margin: 3px;
    background-color: transparent;
    transform: scale(0.9);

    transition: background-color 0.2s, transform 0.1s;
    }.emojiFrame:hover{
    background-color: #0d8cfc;
    }.emojiFrame:active{
    background-color: #4babff;
    transform: scale(0.95);
    }
</style>

无法为动态生成的表单生成表情符号选择器

2 个答案: