Смайлики в textarea

Здравствуйте. Имеется такой код, javascript

Код (Javascript):

1. var ie=document.all?1:0;
2. var ns=document.getElementById&&!document.all?1:0;
3.  
4. function InsertSmile(SmileId)
5. {
6. if(ie)
7. {
8. document.all.comment.focus();
9. document.all.comment.value+=" "+SmileId+" ";
10. }
11.  
12. else if(ns)
13. {
14. document.forms['funforma'].elements['comment'].focus();
15. document.forms['funforma'].elements['comment'].value+=" "+SmileId+" ";
16. }
17.  
18. else
19. alert("Ваш браузер не поддерживается!");
20. }

Имеется форма

PHP:

1.  <form id='submit_wall' name='funforma' >
2.                                                 <p><textarea type='text' name='comment' id='".$row['id']."' value='' style='height:100p' /></textarea>
3.                                                 <p> <input type='hidden' name='messageid' id='".$row['id']."' value='".$row['id']."'></p>     <div class='smile'>
4.    
5.  
6.     <a href='javascript:x()' onclick=\"InsertSmile(':-*')\"><img src='smile/1.gif'/></a>
7.    <a href='javascript:x()' onclick=\"InsertSmile(':)')\"><img src='smile/2.gif'/></a>
8.    <a href='javascript:x()' onclick=\"InsertSmile(':(')\"><img src='smile/3.gif'/></a>
9.    <a href='javascript:x()' onclick=\"InsertSmile(';)')\"><img src='smile/4.gif'/></a>
10.    <a href='javascript:x()' onclick=\"InsertSmile(':P')\"><img src='smile/5.gif'/></a>
11.    <a href='javascript:x()' onclick=\"InsertSmile('8)')\"><img src='smile/6.gif'/></a>
12.    <a href='javascript:x()' onclick=\"InsertSmile(':D')\"><img src='smile/7.gif'/></a>
13.    <a href='javascript:x()' onclick=\"InsertSmile('=O')\"><img src='smile/9.gif'/></a>
14.    <a href='javascript:x()' onclick=\"InsertSmile(':-x')\"><img src='smile/10.gif'/></a>
15.    <a href='javascript:x()' onclick=\"InsertSmile('(T_T)')\"><img src='smile/11.gif'/></a>
16.  
17. </div>";
18.                        
19.                          $stena_group .= '<p><a href="javascript:void(0);" onclick="comment( document.getElementById('.$row['id'].').value, '.$row['id'].' );">
20.                                                  Отправить</a> </p>
21.                                                </form>

В textarea вставляются символы обозначения смайликов, а хотелось бы чтобы были изображения. Подскажите, пожалуйста, как это реализовать.

 

@denis01, вставил textarea
contenteditable="false" чтобы элемент не изменялся. Мы вроде друг друга не так поняли. Мне необходимо чтобы отображалось изображение, а не запрет на редактирование текста. Смайл отображается так : ) а нужно изображение которое ему присвоенно.

 

@denis01, пробовал с div contenteditable, брал все в блок, отдельно картинки не выходит. А за редакторы пишут как их польностью реализовывать, мне необходимы только смайлы.

 

Используя код rodent90 я переписал свою форму под свои нужды. Теперь код имеет такой вид

PHP:

1.        <form id='submit_wall' name='funforma'  >
2.                                                 <p><div  class='textarea_stena' name='comment'  id='".$row['id']."' tabindex='0' contenteditable='true' ondragend='return true'></div>
3.                                                 <p> <input type='hidden' name='messageid' id='".$row['id']."' value='".$row['id']."'></p>    <div id='smiles'>
4.         <img src='smile/1.gif'>
5.         <img src='smile/2.gif'>
6.         <img src='smile/3.gif'>
7.     </div>
8.     ";
9.                
10.                        $stena_group .= '<p><a href="javascript:void(0);" onclick="comment( document.getElementById('.$row['id'].').value, '.$row['id'].' );">
11.                                                 Отправить</a> </p>
12.                                               </form><br/><br />';

С помощью цикла выводятся сообщения и смайлики, где textarea_stena - это класс

Код (CSS):

1.         .textarea_stena{background:#FFFFFF;color:black;border:1px solid #C0CAD5;width:328px;min-height:
2.     40px;padding:3px 25px 3px 3px;padding-bottom:5px;margin-bottom:3px;
3.     outline:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;line-height:150%;word-wrap:break-word;cursor:text;}
4.         .emoji{margin:0px;border:none;vertical-align:top;
5.         }

А это код который отображает изображение и отправляет POST запрос для записи в базу данных.

Код (Javascript):

1. function comment(text, message_id){
2.     $.ajax({
3.         type: "POST",
4.         url: "profile.php",
5. data:"comment=" + text+"&messageid="+message_id,
6.         success: function(){
7.             $("ul#wall").prepend("<li style=\"display: none;\">"+ text +"</li>");
8.             $("ul#wall li:first-child").fadeIn();
9.             }
10.         });
11.     return false;
12. };
13.  
14.  
15.  
16. var arr = document.getElementById('smiles').getElementsByTagName('img');
17.         for(var i in arr) {
18.             if(arr.hasOwnProperty(i)) {
19.                 arr[i].onclick = function(event) {
20.                     if('img' === this.tagName.toLowerCase()) {
21.                         var img = ' <img class="emoji" src="'+this.src+'">&nbsp;';
22.                         document.execCommand('insertHTML', false, img);
23.                     }
24.                 };
25.             }
26.         }

Смайлики отображаются как необходимо, только работает код только с самым первым textarea который выводит сообщение из базы данных, с другими почему-то не работает. Так же при попытке отправить POST запрос в базу записывается undefined. Если Вас не затруднит, не могли бы пожалуйста объяснить где моя ошибка с отправкой POST(ошибка undefined) и так же с передачей фокуса разным textarea с уникальными id.
--- Добавлено ---
В FireBug получаю ошибку с указанием строки, это после обновления страницы.

Код (Text):

1. TypeError: document.getElementById(...) is null
2.  
3.  
4. var arr = document.getElementById('smiles').getElementsByTagName('img');

 

Да, это у меня в PHP коде. только смайлики пронумерованы.

PHP:

1.  <div id='smiles'>
2.         <img src='smile/1.gif'>
3.         <img src='smile/2.gif'>
4.         <img src='smile/3.gif'>
5.     </div>
6.     ";
7.          

Код работает, в плане отображения смайликов, проблема заключается в отправке POST запроса и передаче фокуса разным textarea. Отображаются смайлики только в первом, в остальных нет, прикладываю скрин-шот.

 

В ответе получаю undefined. На скрин-шоте видно в самой первой строчке, ответ такой же.

 

Таким образом я добился в div писать смайл, а в скрытый input его мнемоника.

HTML:

1. <!DOCTYPE html>
2.  
3. <html>
4. <head>
5.  
6.     <style>
7.         .textarea_stena{background:#FFFFFF;color:black;border:1px solid #C0CAD5;width:328px;min-height:
8.     40px;padding:3px 25px 3px 3px;padding-bottom:5px;margin-bottom:3px;
9.     outline:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;line-height:150%;word-wrap:break-word;cursor:text;}
10.         .emoji{margin:0px;border:none;vertical-align:top;
11.         }
12.     </style>
13. </head>
14. <body>
15.     <div id="smiles">
16.         <img src='smile/1.gif'/>
17.     <a href='javascript:x()' onclick="InsertSmile(':)')"><img src='smile/2.gif'/></a>
18.     <a href='javascript:x()' onclick="InsertSmile(':(')"><img src='smile/3.gif'/></a>
19.     <a href='javascript:x()' onclick="InsertSmile(';)')"><img src='smile/4.gif'/></a>
20.     <a href='javascript:x()' onclick="InsertSmile(':P')"><img src='smile/5.gif'/></a>
21.     <a href='javascript:x()' onclick="InsertSmile('8)')"><img src='smile/6.gif'/></a>
22.     <a href='javascript:x()' onclick="InsertSmile(':D')"><img src='smile/7.gif'/></a>
23.     <a href='javascript:x()' onclick="InsertSmile('=O')"><img src='smile/9.gif'/></a>
24.     <a href='javascript:x()' onclick="InsertSmile(':-x')"><img src='smile/10.gif'/></a>
25.     <a href='javascript:x()' onclick="InsertSmile('(T_T)')"><img src='smile/11.gif'/></a>
26.     </div>
27. <form id='submit_wall' name='funforma' >
28.     <div  class="textarea_stena" id="comment" tabindex="0" contenteditable="true" ondragend="return true" onkeyup="copy_text(this.value)"></div>
29.     <input  id="comment_text" value=''  type="text" style='height:100p'  />
30.    
31.  
32.    
33. </form>
34.     <script type="text/javascript">
35.         var arr = document.getElementById('smiles').getElementsByTagName('img');
36.         for(var i in arr) {
37.             if(arr.hasOwnProperty(i)) {
38.                 arr[i].onclick = function(event) {
39.                     if('img' === this.tagName.toLowerCase()) {
40.                         var img = ' <img class="emoji" src="'+this.src+'">&nbsp;';
41.                         document.execCommand('insertHTML', false, img);
42.                     }
43.                 };
44.             }
45.         }
46.     var ie=document.all?1:0;
47. var ns=document.getElementById&&!document.all?1:0;
48.  
49. function InsertSmile(SmileId)
50. {
51. if(ie)
52. {
53. document.all.comment.focus();
54. document.all.comment.value+=" "+SmileId+" ";
55. }
56.  
57. else if(ns)
58. {
59. document.forms['funforma'].elements['comment_text'].focus();
60. document.forms['funforma'].elements['comment_text'].value+=" "+SmileId+" ";
61. }
62.  
63. else
64. alert("ошибка браузера");
65. }
66. function copy_text(val) {
67.     document.getElementById("comment_text").value = val;
68. }
69.     </script>
70.    
71. </body>
72. </html>

У меня возникли следующие проблемы, это передача текста в скрытый input, и так же фокус уходит на input после вставки мнемоника.
Текст у меня получается передавать только с input в input, с div textarea не получается в input. Или с одного textarea в другой. Использую JS

Код (Javascript):

1. function copy_text(val) {
2.     document.getElementById("comment_text").value = val;
3. }

и код формы

HTML:

1. <form id='submit_wall' name='funforma' >
2.     <div  class="textarea_stena" id="comment" tabindex="0" contenteditable="true" ondragend="return true" onkeyup="copy_text(this.value)"></div>
3.     <input  id="comment_text" value=''  type="text" style='height:100p'  />
4.    
5.  
6.    
7. </form>
8.  

Снова получаю ошибку undefined. Подскажите где моя ошибка и как ее исправить.