Emoticon into textarea

JavaScript
1

I have a guestbook whit emoticon, the guestbook is linked to txt file, no database.

is there anyway to hide tag html into textarea?

for example in this site when write the post, the emoticon is “:smile” value to textarea.

in my guestbook the emoticon is tag “<img src” value to textarea.

I did a search on Google I couldn’t find anything.

I am Learning. :eyeglasses:
Thanks a lot for answers.

2

I think the only way is to build a ‘wysiwyg’, which is a fairly complex task. You will need a div instead of a text area in order to visually represent the HTML contents

3

No, not in the textarea directly…

Actually, on this site the emoji doesn’t show in the textarea but in the preview panel to the right. To do that, you can parse the textarea value on input using regular expressions, and update the HTML of your preview element accordingly:

CSS

.preview {
  font-size: 1em;
}

.preview img {
  height: 1em;
}

HTML

<textarea class="input"></textarea>
<div class="preview"></div>

JS

var input = document.querySelector('.input')
var preview = document.querySelector('.preview')

input.addEventListener('input', function onInput () {
  var text = this
  	.value
    .replace(/\:\)/g, '<img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/slightly-smiling-face.png">')
    .replace(/\:D/g, '<img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/grinning-face.png">')
    // chain more replacements here

  preview.innerHTML = text
})

If you want a “real” WYSIWYG you can also hide the textarea so that it appears as if the user was typing directly in the preview element; however, this is quite a bit more involved as you’ll have to display a cursor, handle selections etc.

4

OK sorry, I want to replace the tag html <img, only in the textarea, not in preview. How can i do?

this is my code:

                    <script type="text/javascript">

                var emoticon = function(){
            var images = document.getElementsByClassName("emoticon");
             for(i=0; i<images.length;i++){
	           images[i].onclick = update;
               }
              function update(){
	            var content = document.getElementById("textmsg");
                 content.value = content.value + '<img src=" ' + this.src +  ' " style="width:30px;" />';
    
               } 
                  }

              window.onload = function(){
              emoticon();
             }

      </script>

Thank’s.

6

Ah okay… well no, you’ll always the the img tags written out then. You might just add them later instead when the comment gets written to the database, like, without any JS.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.