Установить позицию курсора в редакторе через designMode
В качестве редактора использую режим designMode = "on"; дабы можно было прямо в редактор вставлять смайлики. После добавления смайлика текстовый курсор остается в прежней позиции, а надо бы его переместить за смайлик, чтобы пользователь мог продолжить набор текста.
Как переместить текстовый курсор в конец текста? |
input.selectionStart = input.value.length |
При чем тут input? Редактирование идет в iframe. Вот функция, заменяющая textarea на свой редактор:
update: function(id) {
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById(id);
var Container = document.createElement("DIV");
// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea);
Container.appendChild(Textarea);
Textarea.style.display = 'none';
// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe id='txt-frame' class='textarea' src=\"javascript: document.open(); document.domain='" + document.domain + "'; document.close();\" frameborder='0'></iframe>";
Container.innerHTML = iframe + Container.innerHTML;
this.Frame = Container.childNodes[0];
// Хитрое определение IE ;)
this.isIE = /*@cc_on!@*/false;
// Выделим документ фрейма в отдельную переменную
this.FrameDoc = this.isIE ? this.Frame.contentWindow.document : this.Frame.contentDocument;
this.FrameDoc.open();
// Если содержимое тега body будет пустым, в FF курсор станет каким-то через-чур маленьким.
// Чтобы этого избежать, добавим & nbsp;
this.FrameDoc.write('<html><head><style>body{ margin:0; padding:4px; width:795px; font-size: 11px; font-family: tahoma,arial,verdana,sans-serif,Lucida Sans; word-wrap:break-word; }.smile{width: 20px; height: 20px;}</style></head><body>'+ Textarea.value +' </body></html>');
this.FrameDoc.close();
this.FrameDoc.designMode = "on";
this.Frame.contentWindow.focus();
}
|
|
| Часовой пояс GMT +3, время: 03:58. |