вставка картинок в iframe
Есть задача: сделать строку редактирования сообщений чата со вставкой смайлов. Причем смайлы должны быть видны в нормальном виде (то есть в виде картинки) прямо в поле ввода.
Задачу я решил выполнить на основе iframe в режиме designMode="On". Картинки смайлов вставляются щелчком мышкой по соответствующему смайлу. При нажатии на кнопку редактируемое содержимое переносится в поле input, а сам iframe отчищается. Все замечательно работает, во всех приличных браузерах картинки вставляются и можно дальше продолжать редактировать сообщение, кроме IE. У этого чудного браузера картинки тоже замечательно вставляются, но при этом они сохраняют фокус на себе. То есть чтобы продолжить редактирование надо сначала "сдвинуть" курсор в сторону например стрелками на клавиатуре или мышкой, что не есть удобно. Итак вопрос в следующем: Как сдвинуть курсор со вставленной картинки в IE? Ниже представлен код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iFrame</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style> body,html {margin:0;padding:0;width:100%;height:100%;} #layout {margin:0;padding:0;width:500px;height:300px;border:double 3px #F00;background:#FF0;overflow:auto;} #text {width:500px;} </style> </head> <body> <div id="layout"> <iframe id="iFrameID" name="iFrameID" frameborder="0" allowtransparency="true" width="100%" height="100%" scrolling="auto" marginheight="0" marginwidth="0" hspace="0" vspace="0"></iframe> </div> <img src="group/beer.gif" alt="" /><br /> <input id="text" type="text" /><br /> <input id="button" type="button" value="Button" /><br /> </body> <script type="text/javascript"> $(document).ready(function(){ var isGecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1; var iframe = (isGecko) ? document.getElementById('iFrameID') : frames['iFrameID']; var iWin = (isGecko) ? iframe.contentWindow : iframe.window; var iDoc = (isGecko) ? iframe.contentDocument : iframe.document; var iframeDoc='<head><style>body,html {margin:0;padding:0;width:100%;height:100%;}body {background:#3C9;}</style></head><body id="frameBodyID" class="frameBody"></body>'; iDoc.open(); iDoc.write(iframeDoc); iDoc.close(); iDoc.designMode = (isGecko) ? "on" : "On"; // Обработка кликов $('img').click(function(){ iWin.focus(); iWin.document.execCommand('InsertImage', false, $(this).attr('src')) }); $('#button').click(function(){ iWin.focus(); var iFrameContents=iDoc.getElementsByTagName("body")[0].innerHTML; $('#text').val(iFrameContents); iDoc.getElementsByTagName("body")[0].innerHTML='' }) }); </script> </html> PS: решение необходимо только под современные версии браузера IE, то есть для IE8, хотя если будет работать и в IE7 - тоже неплохо, но не обязательно :) |
Часовой пояс GMT +3, время: 16:54. |