Есть задача: сделать строку редактирования сообщений чата со вставкой смайлов. Причем смайлы должны быть видны в нормальном виде (то есть в виде картинки) прямо в поле ввода.
Задачу я решил выполнить на основе 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 - тоже неплохо, но не обязательно 
