Question

请大家，我有问题。我创建了一个页面，当单击图像时可以在文本区域中插入表情符号文本，单击提交按钮时，表单通过ajax方法提交，这里的代码非常正常：

    <form id="my_form">
    <textarea name="comment" id="comment" class="open" placeholder="Comment..."></textarea><br>
    <input type="hidden" id="post" name="post" value="<?php echo $my_id; ?>" />
    <span id="form_span"><input type="submit" name="submit" id="submit" class="comment_send" value="COMMENT" /></span><div style="display:none;" id="form_progress"><img src='progress-dots.gif' /></div>
    <div id="form_error" style="display:none;"><a href="javascript:;" style="float:right;margin:5px 5px;color:#fff;text-decoration:none;" onclick="document.getElementById('form_error').style.display='none'">x</a>Please make a Comment!</div>
    <div id="emoji" class="emoji">
    <a href="javascript:;" title=":glad;"><img title="glad" border="0" src="emojis/smiley2.png" /></a>
    <a href="javascript:;" title=":joy;"><img title="joy" border="0" src="emojis/smiley3.png" /></a>
    <a href="javascript:;" title=":jeer;"><img title="jeer" border="0" src="emojis/smiley43.png" /></a>
    <a href="javascript:;" title=":angry;"><img title="angry" border="0" src="emojis/smiley76.png" /></a>
</div>
    </form>
<script src="js/jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $('#my_form').submit(function(e) {
                e.preventDefault();
                if($("#comment").val() == "")
                  {
                      $('#comment').focus();
                    document.getElementById('form_error').style.display='block';
                  } else {
                $.ajax({
                    method: "GET",
                    url: "comment_send.php",
                    data: $(this).serialize(),
                    beforeSend: function(){
                        document.getElementById('form_error').style.display='none';
                        document.getElementById('form_progress').style.display='block';
                        $('#form_span').html("<input type='submit' name='submit' id='submit' class='disable_comment' value='COMMENT' disabled/>");
                    },
                    success: function(status) {
                        $('#comment').val('');
                        document.getElementById('form_progress').style.display='none';
                        $('#form_span').html("<input type='submit' name='submit' id='submit' class='comment_send' value='COMMENT' />");
                    }
                });
                  }
            });
        });
    </script>
//to insert the emoji texts in the text area
    <script type="text/javascript">
        $('#emoji a').click(function () {
   var smiley = $(this).attr('title');
   ins2pos(smiley, 'comment');
});

function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);

   TextArea.value = before + str + after;
   setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
   if (elem.setSelectionRange) {
      elem.focus();
      elem.setSelectionRange(pos, pos);
   } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
   }
}
    </script>

我还使用jquery .load函数在同一页面上显示评论：

    <div id="comment_display" style="width:250px;height:500px;overflow-y:auto;"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            setInterval(function () {
                $('#comment_display').load('comment_display.php')
            }, 1000);
        });
    </script>

这是comment_display.php页面：

<?php
include 'connect.php';
$query = mysqli_query($con, "SELECT * FROM comments ORDER BY id DESC");
while($row = mysqli_fetch_array($query)){
    $comment = $row['comment'];

    echo "<p>".$comment."</p>";
    }
    ?>

并且所有这些代码都工作得非常好但是现在我的问题是我想要用自己的图像替换表情符号文本，所以我使用这段代码：

        <script type="text/javascript">

// for :glad;
$("body").html($("body").html().replace(/:glad;/g,'<img src="emojis/smiley2.png" />'));

// for :joy;
$("body").html($("body").html().replace(/:joy;/g,'<img src="emojis/smiley3.png" />'));

// for :jeer;
$("body").html($("body").html().replace(/:jeer;/g,'<img src="emojis/smiley43.png" />'));

// for :angry;
$("body").html($("body").html().replace(/:angry;/g,'<img src="emojis/smiley76.png" />'));
    </script>

但是当我添加最后一个javascript代码来替换表情符号文本时，将表情符号文本插入textarea的表情符号图像停止工作，如果我点击它们就不会做任何事情

Answer 1

我创建的小型演示只替换了一个单词

＆＃13;

$("button").on('click', function() {
  var txt = $("textarea").val();
  var newtxt=txt.replace(/:glad/g, '<img src="emojis/smiley76.png" />');
  $("textarea")[0].innerText=newtxt; //YOU HAVE TO SET NEW TXT IN TEXTAREA
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="5" rows="5">:glad</textarea>
<button>
  click
</button>

＆＃13;

可能你已经使用了$（body）.html（）这就是为什么它不能正常工作......这可能不是你的答案，但你可以知道你的代码中缺少什么......

插入笑脸文字并播放图像

1 个答案: