写入任何文本后都无法插入表情符号

Question

Textarea无法预览图片，因此我将其设为background和color 透明，并在其后面设置另一个div来预览textarea的val。

现在。如果我在textarea上写/删除它的东西很好。但是在textarea上写入/删除并单击以插入任何表情符号（右表情符号窗口，在我的下面的示例中），它不能插入任何表情符号。我在哪里错了？

请帮帮我？

var smileys = {
    ':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
};

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function smilyMe(msg) {
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
    for (var key in smileys) {
        msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]);
    }
    return msg;
}
$(document).ready(function() {
  $(".chat > textarea").bind("keyup", function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
  $('#maintbox').on('keyup',function() {
    $(this).css('height','auto');
    $(this).css('height',Math.max(this.scrollHeight)+'px');
  });
  $('#showhide_emobox').click(function(){
    $('#emobox').fadeToggle();
    $(this).toggleClass('active');
  });
  $(".embtn").click(function(event){
    var prevMsg = $(".chat > textarea").val();
    var emotiText = $(event.target).attr("alt");
    $(".chat > textarea").html(prevMsg + emotiText);
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
    $('textarea').elastic();
});

#maintbox {
    position:relative;
	border: 2px solid #ccc;
	min-height: 50px;
	width: 450;
    top:100px;
}
div.chat {
    width: 100%;
}
.preview {
    max-width: 400px;
    font-family:Times New Roman, Times, serif;
    font-size:14px;
    color:#000000;
    position:absolute;
    top:0; left:0; z-index:997;
}
div.chat > textarea {
    font-family:Times New Roman, Times, serif;
	font-size:14px;
    margin-left:-2px;
    margin-top:-2px;
    margin-bottom:2px;
	min-height: 50px;
	width: 510px;
    resize:none;
	float:left;
    position:absolute; color:transparent;
    top:0; left:0; z-index:998; background: transparent;
}
.em {
    position:relative;
    margin:1px 2px;
    float:right;
    height:20px;
    width:20px;
    text-align:center;
}
.em img {
    margin-top:1px;
    cursor:pointer;
    color:white;
    display:block;
    transition:all 1s ease;
}
#emobox {
    background:#fff;
    display:none;
    position:absolute;
    width:200px;
    bottom:25px;
    left:-176px;
    border: 2px solid #ccc;
    white-space:nowrap;
}
#emobox img {
    float:left;
    position:relative;
    display:inline-block;
    margin:5px 5px;
}

<div id="maintbox">
  <div class="chat">
    <div class="preview"></div>
	  <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
  </div>
      
<div align="right"><img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" />
  <div class="em">
    <img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/>
      <div id="emobox">
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":)" class="embtn" />
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":-)" class="embtn" />
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":D" class="embtn" />
      </div>
  </div>
</div>
  
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>

Answer 1

html（）是设置textarea内容的错误方法。改为使用val（）。

原因是textarea从其开始和结束标记之间包含的文本中获取其初始值。它的当前值始终存储在其value属性中。

替换此行

$(".chat > textarea").html(prevMsg + emotiText);

与

$(".chat > textarea").val(prevMsg + emotiText);

以下是完整代码：

var smileys = {
    ':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
	':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
};

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function smilyMe(msg) {
    msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
    for (var key in smileys) {
        msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]);
    }
    return msg;
}
$(document).ready(function() {
  $(".chat > textarea").bind("keyup", function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
  $('#maintbox').on('keyup',function() {
    $(this).css('height','auto');
    $(this).css('height',Math.max(this.scrollHeight)+'px');
  });
  $('#showhide_emobox').click(function(){
    $('#emobox').fadeToggle();
    $(this).toggleClass('active');
  });
  $(".embtn").click(function(event){
    var prevMsg = $(".chat > textarea").val();
    var emotiText = $(event.target).attr("alt");
    $(".chat > textarea").val(prevMsg + emotiText);
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
    $('textarea').elastic();
});

#maintbox {
    position:relative;
	border: 2px solid #ccc;
	min-height: 50px;
	width: 450;
    top:100px;
}
div.chat {
    width: 100%;
}
.preview {
    max-width: 400px;
    font-family:Times New Roman, Times, serif;
    font-size:14px;
    color:#000000;
    position:absolute;
    top:0; left:0; z-index:997;
}
div.chat > textarea {
    font-family:Times New Roman, Times, serif;
	font-size:14px;
    margin-left:-2px;
    margin-top:-2px;
    margin-bottom:2px;
	min-height: 50px;
	width: 510px;
    resize:none;
	float:left;
    position:absolute; color:transparent;
    top:0; left:0; z-index:998; background: transparent;
}
.em {
    position:relative;
    margin:1px 2px;
    float:right;
    height:20px;
    width:20px;
    text-align:center;
}
.em img {
    margin-top:1px;
    cursor:pointer;
    color:white;
    display:block;
    transition:all 1s ease;
}
#emobox {
    background:#fff;
    display:none;
    position:absolute;
    width:200px;
    bottom:25px;
    left:-176px;
    border: 2px solid #ccc;
    white-space:nowrap;
}
#emobox img {
    float:left;
    position:relative;
    display:inline-block;
    margin:5px 5px;
}

<div id="maintbox">
  <div class="chat">
    <div class="preview"></div>
	  <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
  </div>
      
<div align="right"><img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" />
  <div class="em">
    <img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/>
      <div id="emobox">
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":)" class="embtn" />
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":-)" class="embtn" />
		<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":D" class="embtn" />
      </div>
  </div>
</div>
  
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>