Question

我将textarea更改为div contenteditable以显示表情符号，但只需输入表情符号的文字值。所以我使用了jQuery .bind。

现在，当我在textarea上写任何东西时，我无法在contenteditable div上输入任何文字。

这是我的工作:(这里888是我的所有php '.$id.'）

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() {
  $("#comment").bind("keyup", function(e) {
  	var EID = $(this).attr('class').replace('com','');
    $(".com"+EID).html(smilyMe($(".com"+EID).html()));
  });
});

#maintbox {
    top:50px;
	position:relative;
	min-height: 38px;
	width: 100%;
}
div.chat {
    width: 100%;
}

#comment {
    font-family:Times New Roman, Times, serif;
	font-size:12px;
  	min-height: 25px;
  	color:#000;
  	top:0; left:0; z-index:998; background: transparent;
	border: 2px solid #ccc;
	position:relative;
	float:left;
    width:100%;
    margin: 0;
    resize: none;
    padding-right:50px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<div id="maintbox">
  <div class="chat">
	  <div contenteditable name="comment" tabindex="4" id="comment" class="com888" placeholder="Type here..."></div>
  </div>
</div>
  
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>

Answer 1

希望这可能有助于你交配.. :)

$(document).ready(function() {
  $("#comment").bind("keyup", function(e) {
    var EID = $(this).attr('class').replace('com','');
    $(".com"+EID).html(smilyMe($(".com"+EID).html()));  //Replaced .val() to .html()
  });
});

Fiddle

如何在contenteditable div上用表情符号写任何文本

1 个答案: