0

I changed my textarea to div contenteditable for display emoticon yet just enter emoticon's value with text. So I used jQuery .bind.

Now I cannot enter any text on contenteditable div when I write anything on textarea.

Here is my work: ( here 888 is all of my 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>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
joy
  • 81
  • 9

1 Answers1

-1

Hope this might help u mate.. :)

$(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

Nibin
  • 3,922
  • 2
  • 20
  • 38
  • Thank u sir. Updated with html but after write any text with :) Textarea cursor starting from beginning. – joy Feb 06 '15 at 09:12
  • Check this link mate..http://stackoverflow.com/questions/2871081/jquery-setting-cursor-position-in-contenteditable-div – Nibin Feb 06 '15 at 09:23
  • If you found the answer useful upvote the answers so that it would be helpful for others too. – Nibin Feb 06 '15 at 09:33