Оо доперло iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML содержимое поля iframe
итак к чему я пришел Ггг (прошу строго не судить) на странице составляем форму HTML: <form action="" method="post"> <-- поле куда будут заноситься данные --> <input type="hidden" class="edit_able" name="msg" value=" " /><br /> <input type="submit" value="Добавить" /> <-- поле для смайлов --> <div class="smiles"></div> теперь сам js PHP: $(document).ready(function() { if($('.edit_able').length) { var input = $('.edit_able'); // создаем iframe var iframe = document.createElement("iframe"); // даем ему оформление iframe.className = 'edit_able'; // вставляем его на страницу input.after(iframe); var doc = "<body class='frameBody'>"+input.val()+"</body>"; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(doc); iframe.contentWindow.document.close(); // включаем редактирование iframe.contentWindow.document.designMode = "On"; // добавляем на страницу смайлы var smiles = [')','(','8','atlet','ban','be','blin','bomba']; var smiles_box=''; for(i=0;i<8;i++) smiles_box += '<img src="img/smiles/'+smiles[i]+'.gif" class="smile" alt=""> '; $('.smiles').html(smiles_box); // и теперь при клике на смайл вставляем его в iframe $('.smile').click(function() { iframe.contentWindow.document.execCommand('InsertImage', false, $(this).attr('src')); }) // теперь 2 раза в секунду заносим содержимое iframe в наше скрытое поле //смайлы попадают туда ввиде кода setInterval(function() { $('.edit_able').val(iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML); },500); } }); ну вот вобщем то до чего я докопалсо гг, опера и мозилла воспринимают все адекватно а ослик ИЕ событие клика на картинку не воспринимает...
ну я просто не стал заморачиваться с обработкой нажатий клавиш и т.д. + я незнаю как определить копипаст
Просто убери интервал PHP: ... Код ... // и теперь при клике на смайл вставляем его в iframe $('.smile').click(function() { iframe.contentWindow.document.execCommand('InsertI mage', false, $(this).attr('src')); }) //смайлы попадают туда ввиде кода $('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML); Сразу будет обновляется при занесении картинки
FireFenix, угу счас, ну во первых чтоб уж при клике обновлялось то надо внести эту строку кода в саму функцию клика, а во вторых - как же текст который также будет вводиться? не проблема - отслеживать keydown keypress keyup, остается копипаст - как его отследить?
HTML: <script language="Javascript"> function update() { $('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML); } </script> <textarea id="text" name="text" size="20" rows="10" onChange="javascript:update();">я текстo</textarea>
как вариант заменять все теги/символы, или перекодировать в хтмл (& = & > = > и т.д.), или то и то Для кодирования у пхп есть функция htmlspecialchars()
да я не в том смысле - при вводе текста нажимаешь перенос строки и курсор делает прыжок через одну т.е. так текст продолжение а надо так текст продолжение я про визуальное восприятие говорю
и еше - при истечении лимита вводимых символов - как запретить дальнейший ввод?? с текстареа это не проблема сделать, а вот с ифреймом?
PHP: <script language="javascript"> function check() { var event = (window.event ? window.event : null); var element = document.getElementById('text'); if (element.value.length > 10) { event.cancelBubble = true; if (event.cancelable) { event.preventDefault(); event.stopPropagation(); } alert('Превышено количество символов'); } } </script> <textarea id="text" name="text" size="200" rows="10" onKeyPress="javascript:check();"></textarea>
