» Javascript: Вставка текста в textarea в положение курсора

Есть текстовое поле <input> или <textarea>
Возможно ли добавлять текст к уже имеющемся в поле не в конец строки, а в положение курсора?

OLEX
Ну ты и назвал темку.. Поправь..
Смотри пример вставки улыбочек в phpbb

Код:
function emoticon(text) {
var txtarea = document.post.message;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

OLEX
Или малость по-другому: http://forum.ru-board.com/topic.cgi?forum=21&topic=2033#18

само собой, всё только в MSIE такое работает...

Cheery
Не знаю почему, но твой вариант не сработал.... вставляет в конец текста....
Svarga а твой работает
Цитата:

только в MSIE

а мне только там и нужно!
Спасибо!

OLEX

Цитата:

Не знаю почему, но твой вариант не сработал.... вставляет в конец текста....

А у меня все пашет.. под IE.. Какая версия? Покажи страницу, что не пашет..
зы: тот код для textarea

Нашел еще один способ:

Код:
Вопрос: как вставить текст в textarea или input type=text в то место, где стоит курсор?

Ответ: этот код работает с IE 4+ и Netscape 6/Mozilla. Во всех остальных браузерах текст добавляется в конец. Определять текстовое поле надо так:

<textarea name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">

или

<input type=text name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">

Функция storeCaret:

function storeCaret(element)
{
if (document.selection && document.selection.createRange)
element.caretPos=document.selection.createRange().duplicate();
}

Функция insertText, которая вставляет текст:

function insertText(element,text)
{
if (element && element.caretPos)
element.caretPos.text=text;
else if (element && element.selectionStart+1 && element.selectionEnd+1)
element.value=element.value.substring(0,element.selectionStart)+text+e
lement.value.substring(element.selectionEnd,element.value.length);
else if (element)
element.value+=text;
}

OLEX

Цитата:

Третий вариант лучше всего работает. попробуй вставить что нибудь, предварительно выделив часть текста в Сваргином и моем варианте.

Тьфу.. я просто забыл добавить часть ) это и есть то, как сделано в phpbb

Цитата:

<textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">

function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

Так что у всех одинаково

Цитата:

Не обновляется внизу DIV при наборе текста в Эксплорере!!!

Гмммм...... маленькая поправка: не в Эксплорере, а в МайИЕ..... В ИЕ обновляется

А чтобы в опере (новой) работало - никак? нет такого кода что ли?

Shurik

Цитата:

чтобы в опере (новой) работало - никак? нет такого кода что ли?

нет, эти скрипты textRange с его методами используют, который только в MSIE...
OLEX

Цитата:

Гмммм...... маленькая поправка: не в Эксплорере, а в МайИЕ..... В ИЕ обновляется

А какой юзерэджент твои MyIE и MSIE выдают?
просто все эти операции с позицией курсора глючат в 5-м ИЕ (нормально работают в 5.5+)...

Добавлено

Цитата:

глючат в 5-м ИЕ (нормально работают в 5.5+)...

ну да... поэтому я вычисление позиции курсора в своём варианте на onBeforeDeactivate повесил (оно с ИЕ5.5 поддерживается)

OLEX
> Третий вариант лучше всего работает.

Да, похожий код и у меня - можете посмотреть на готовую реализацию

(ждал и смотрел comp.lang.javascript, пока не дождался, что и Netscape/Мозилла
стали это делать, а именно, не только вставлять, но ещё и символ подменять):

http://ourworld.compuserve.com/homepages/PaulGor/screen_r.htm

Цитата:

И новый из того, что я сам отрыл: http://ibis-tour.com/wywiwig3.html

Там конечно я их поковеркал, но в твоем вроде все правильно сделал....
Третий вариант лучше всего работает. попробуй вставить что нибудь, предварительно выделив часть текста в Сваргином и моем варианте.

В IE6.0 в третьем варианте есть один неприятный глюк - при вставке текста из клипбоард по правому клику, позиция курсора не меняется и следующая вставка чего-либо через кнопочки удаляет этот вставленный текст. Хотим фикса

Lucrecia,
Может, я не понял, как воспроизвести проблему, но у меня такой проблемы нет (а мой вариант похож на тот третий). Вот моя страница и в ИЕ 6 работает Ок -
"Русская Виртуальная Клавиатура":
http://ourworld.compuserve.com/homepages/PaulGor/onscreen.htm

Цитата:

Может, я не понял, как воспроизвести проблему, но у меня такой проблемы нет (а мой вариант похож на тот третий). Вот моя страница и в ИЕ 6 работает Ок -
"Русская Виртуальная Клавиатура":
http://ourworld.compuserve.com/homepages/PaulGor/onscreen.htm

Во всех моих ИЕ6 с последними фиксами данная проблема есть, и ваша страница глючит точно также, внимательней:
1. Копируем что-то в клипбоард.
2. МЫШЬЮ правым кликом делаем Paste
3. Не кликая в текстареа, сразу нажимаем МЫШЬЮ какую-либо букву под клавиатурой - она заменяет скопированный текст.

Lucrecia

Цитата:

Цитата:Может, я не понял, как воспроизвести проблему, но у меня такой проблемы нет (а мой вариант похож на тот третий). Вот моя страница и в ИЕ 6 работает Ок -
"Русская Виртуальная Клавиатура":
http://ourworld.compuserve.com/homepages/PaulGor/onscreen.htm


Во всех моих ИЕ6 с последними фиксами данная проблема есть, и ваша страница глючит точно также, внимательней:
1. Копируем что-то в клипбоард.
2. МЫШЬЮ правым кликом делаем Paste
3. Не кликая в текстареа, сразу нажимаем МЫШЬЮ какую-либо букву под клавиатурой - она заменяет скопированный текст

А, так Вы не про клавиатурный ввод, а про сделанную на 'крайний Мексиканский случай' строку алфавита, где можно мышкой вводить букву, щёлкая по её изображению?
Понятно тогда, почему я первый раз не понял...

Честно говоря, в страницах 3-его варианта вообще не нужны clickable letters ведь весь смысл как раз и заключается в уходе от старого трудоёмкого метода ввода "буква-за-буквой", щёлкая по каждой букве - так только одно-два слова ввести можно, замучаешься...
То есть весь смысл нового подхода - чтобы точно имитировать обычную работу с Клавиатурой - на таких страницах вообще может не быть clickable letters...

В любом случае, когда я понял, что надо делать:
1) То же самое я могу проделать в ИЕ 5.5.
2) Да, это только если Paste делать правой кнопкой мыши. Если Ctrl/V то всё Ок. Но при обычном вводе текста, IMHO, человек не будет правой мышкой Paste делать, он ведь с Клавиатурой работает, так что скорее нажмёт Ctrl/V

В общем, это 'corner case' - 2 редкие вещи вместе - ненужный на странице 3-го типа clickable алфавит плюс Paste правой кнопкой мыши...

Починить скорее всего не удастся - мне кажется, это ошибка в самом IE - раз не реагирует на Paste через правую кнопку мыши - не запоминает позицию курсора, а при Paste через Ctrl/V - всё в порядке...

Я не думаю, что мы можем в JavaScript 'поймать' как Paste происходило - по Ctrl/V или по правой кнопке мыши - и так вроде везде стоит вызов функции "Обновить позицию курсора" - так что это скорее всего ошибка самого ИЕ.

Сейчас в Мозилле попробую то же самое. Ага, нет такой проблемы, так что это наверное IE bug.

Народ! А как такую штуку организовать в showModalDialog ?

вот мой код

Цитата:

<script language="JavaScript">
<!--
function emoticon(char1){
document.card_form.card_text_text.focus();
var str='';
if(document.getSelection){
str = document.getSelection();
document.card_form.card_text_text.value=document.card_form.card_text_text.value+char1+str;
}
else if (document.selection && document.selection.createRange){
str = document.selection.createRange();
str.text = char1+str.text;
}
else{
alert('Операция не может быть выполнена');
}
document.card_form.card_text_text.focus();
}
//-->
</script>

это он в основной странице, а вот как в модалдиалог такое делаетсья?

Здравствуйте есть, код: в Опере, IE работает, а вот в Firefox 1.0.7 (в предыдущих версия не пробовал) нет.
В чем ошибка, подскажите?
Заранее благодарен!


Код:
<script language='JavaScript'>

function quoteSelection() {

theSelection = false;
theSelection = document.selection.createRange().text; // Get text selection

if (theSelection) {
// Add tags around selection
emoticon( '
Цитата:

' + theSelection + '\n

\n');
document.post.message.focus();
theSelection = '';
return;
}else{
alert('Текст не выделен');
}
function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
</script>
<tr>
<td class='row1' align="left">
<span class="nav"><a href="javascript:quoteSelection();" title="Цитировать выделенный текст." class="nav">Цитата</a></span><br /><br />
</td>
<td class='row1' valign='top'>
<textarea name='message' rows='15' cols='125' wrap='virtual' tabindex='3' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea><br>
</td>
</tr>

Paha_W

Цитата:

вот в Firefox 1.0.7 (в предыдущих версия не пробовал) нет

в адресной строке набиваешь javascript:
и смотришь, в чем ошибка

Выдает ошибку:

Цитата:

Ошибка: document.selection has no properties
Источник: Строка: 666

переходим на источник подсвеичвает вот эту строчку:

Код:
theSelection = document.selection.createRange().text; // Get text selection

покорявил и вот что получилось:

Код:
[no]
<script language='JavaScript'>

function quoteSelection() {

theSelection = false;
theSelection1 = window.getSelection; // Get text selection
theSelection = document.selection; // Get text selection
if (theSelection) {
theSelection = document.selection.createRange().text; // Get text selection
// Add tags around selection
emoticon( '
Цитата:

' + theSelection + '\n

\n');
document.post.message.focus();
theSelection = '';
return;
}else if (theSelection1){
theSelection1 = window.getSelection(); // Get text selection
// Add tags around selection
emoticon( '
Цитата:

' + theSelection1 + '\n

\n');
document.post.message.focus();
theSelection = '';
return;
}
else{
alert('{L_NO_TEXT_SELECTED}');
}
}

function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

function emoticon(text) {
if (document.post.message.createTextRange && document.post.message.caretPos) {
var caretPos = document.post.message.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
document.post.message.focus();
} else {
document.post.message.value += text;
document.post.message.focus();
}
}

function checkForm() {
formErrors = false;
if (document.post.message.value.length < 2) {
formErrors = '{L_EMPTY_MESSAGE}';
}
if (formErrors) {
alert(formErrors);
return false;
} else {
if (document.post.quick_quote.checked) {
document.post.message.value = document.post.last_msg.value + document.post.message.value;
}
document.post.quick_quote.checked = false;
return true;
}
}
</script>
[/no]

Paha_W
смотри, как сделано тут - вставляет где надо

Cheery
Можно вопрос что именно смотреть ссылки

Цитата:

Твой вариант: http://ibis-tour.com/wywiwig.html
Сварги: http://ibis-tour.com/wywiwig2.html
И новый из того, что я сам отрыл: http://ibis-tour.com/wywiwig3.html

У меня не открываются.
Вариант Svarga у меня стоит на борде но он добавляет только в конец.
а вот в данном варианте:

Цитата:

<textarea name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">

или

<input type=text name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">

Функция storeCaret:

function storeCaret(element)
{
if (document.selection && document.selection.createRange)
element.caretPos=document.selection.createRange().duplicate();
}

Функция insertText, которая вставляет текст:

function insertText(element,text)
{
if (element && element.caretPos)
element.caretPos.text=text;
else if (element && element.selectionStart+1 && element.selectionEnd+1)
element.value=element.value.substring(0,element.selectionStart)+text+e
lement.value.substring(element.selectionEnd,element.value.length);
else if (element)
element.value+=text;
}

я немогу понять как insertText(element,text) зачем так сделанно
если я правильно понимаю то element это то что прилетает тоесть "текст", а text это просто переменная.
Или нет совсем запутался.

Paha_W

Цитата:

если я правильно понимаю то element это то что прилетает тоесть "текст", а text это просто переменная.

element это то, куда вставляется.. text - что вставляется.

Возможно значение element пишем здесь: insertText(element,text) чтобы не делать так:document.post.message подскажите пожалуйста.

Paha_W

Цитата:

Возможно значение element пишем здесь: insertText(element,text) чтобы не делать так:document.post.message подскажите пожалуйста.

Что? я не понимаю вопроса.

Код:
<a href="javascript: quoteSelection();" title="Цитировать выделенный текст." class="nav">Цитата</a>
<textarea name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">
<script>
function quoteSelection() {

theSelection1 = false;
theSelection = false;
theSelection1 = window.getSelection; // Get text selection
theSelection = document.selection; // Get text selection
if (theSelection) {
theSelection = document.selection.createRange().text; // Get text selection
// Add tags around selection
insertText( '
Цитата:

' + theSelection + '\n

\n');
document.post.message.focus();
theSelection = '';
return;
}else if (theSelection1){
theSelection1 = window.getSelection(); // Get text selection
// Add tags around selection
emoticon( '
Цитата:

' + theSelection1 + '\n

\n');
document.post.message.focus();
theSelection = '';
return;
}
else{
alert('Выберите текст');
}
}
function storeCaret(theSelection)
{
if (document.selection && document.selection.createRange)
theSelection.caretPos=document.selection.createRange().duplicate();
}

function insertText(theSelection,text)
{
if (theSelection && theSelection.caretPos)
theSelection.caretPos.text=text;
else if (theSelection && theSelection.selectionStart+1 && theSelection.selectionEnd+1)
theSelection.value=theSelection.value.substring(0,theSelection.selectionStart)+text+e
lement.value.substring(theSelection.selectionEnd,theSelection.value.length);
else if (theSelection)
theSelection.value+=text;
}
</script>

Paha_W

Цитата:

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

в FF набери в адресной строке javascript: и читай.
ps: юзай getElementById, а не
Цитата:

document.post.message.focus();

Цитата:

в FF набери в адресной строке javascript: и читай.

Я так и ищу ошибку как вы до этого мне и говорили, но версия FF 1.5 мне говорит что у меня обшика в том что у меня не определена quoteSelection();
Как мне оперделить функцию?
На счет getElementById
У мен так:

Цитата:

document.post.message.focus();

А делать так?

Цитата:

document.getElementById();

Paha_W
Может почитаешь сначала учебники по JS?
document.getElementById('message').focus();
соответственно message определено как id, а не name

Цитата:

Как мне оперделить функцию?

создать ее и описать. если написана, значит JS не воспринимает ее по причине синтаксической ошибки либо потому, что обращение к ней идет до того, как она определена - твой случай.
хотя если у тебя функция в a href, то лучше смотреть код самой функции.
тут сложно оценить, так как идет обработка тагов [no][q][/no]
пиши все либо в [no][code][/code][/no] либо между [no][no][/no][/no]

Cheery
Вот последний вариант
[no]
<script>
function quoteSelection() {

theSelection1 = false;
theSelection = false;
theSelection1 = window.getSelection; // Get text selection
theSelection = document.selection; // Get text selection
if (theSelection) { theSelection = document.selection.createRange().text; // Get text selection
// Add tags around selection
insertText('
Цитата:

' + theSelection + '\n

\n');
document.getElementById('message').focus();
theSelection = '';
return;
}else if (theSelection1){ theSelection1 = window.getSelection(); // Get text selection
// Add tags around selection
insertText('
Цитата:

' + theSelection1 + '\n

\n');
document.getElementById('message').focus();
theSelection = '';
return;
}
else{
alert('Выберите текст');
}
}
function storeCaret(theSelection)
{
if (document.selection && document.selection.createRange)
theSelection.caretPos=document.selection.createRange().duplicate();
}

function insertText(theSelection,text)
{
if (theSelection && theSelection.caretPos)
theSelection.caretPos.text=text;
else if (theSelection && theSelection.selectionStart+1 && theSelection.selectionEnd+1)
theSelection.value=theSelection.value.substring(0,theSelection.selectionStart)+text+theSelection.value.substring(theSelection.selectionEnd,theSelection.value.length);
else if (theSelection)
theSelection.value+=text;
}
</script>

Текст текстТекст текстТекст текстТекст текстТекст текстТекст текст

<textarea name='message' rows='15' cols='125' wrap='virtual' tabindex='3' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea><br>
<a href="javascript:quoteSelection();" title="Цитировать выделенный текст." class="nav">Цитата</a>
[/no]
Сейчас фф выдает ошибку в 17 строчке
тоесть

Цитата:

document.getElementById('message').focus();