Как вставить символ в карете с помощью javascript?

Я хочу вставить некоторые специальные символы в текстовые поля каретки внутри, используя javascript на кнопке. Как это можно сделать?

script необходимо найти активное текстовое поле и вставить символ в карете в этом текстовом поле. script также должен работать в IE и Firefox.

EDIT: Также хорошо вставить символ "последний" в ранее активном текстовом поле.

Ответы

Ответ 1

Я думаю, что Джейсон Коэн неверен. Позиция каретки сохраняется, когда фокус теряется.

[ Изменить: добавлен код для FireFox, который у меня не был первоначально.]

[ Изменить: добавлен код для определения последнего активного текстового поля.]

Во-первых, вы можете использовать каждое текстовое поле onBlur для установки переменной в "this", чтобы вы всегда знали последнее активное текстовое поле.

Затем есть способ IE, чтобы получить позицию курсора, которая также работает в Opera, и более простой способ в Firefox.

В IE основной концепцией является использование объекта document.selection и вставка некоторого текста в выделение. Затем, используя indexOf, вы можете получить позицию добавляемого текста.

В FireFox существует метод под названием selectionStart, который даст вам позицию курсора.

Как только у вас есть позиция курсора, вы переписываете весь текст .value с помощью

перед позицией курсора + текст, который вы хотите вставить + текст после позиции курсора

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

<html><head></head><body>

<script language="JavaScript">
<!--

var lasttext;

function doinsert_ie() {
    var oldtext = lasttext.value;
    var marker = "##MARKER##";
    lasttext.focus();
    var sel = document.selection.createRange();
    sel.text = marker;
    var tmptext = lasttext.value;
    var curpos = tmptext.indexOf(marker);
    pretext = oldtext.substring(0,curpos);
    posttest = oldtext.substring(curpos,oldtext.length);
    lasttext.value = pretext + "|" + posttest;
}

function doinsert_ff() {
    var oldtext = lasttext.value;
    var curpos = lasttext.selectionStart;
    pretext = oldtext.substring(0,curpos);
    posttest = oldtext.substring(curpos,oldtext.length);
    lasttext.value = pretext + "|" + posttest;
}

-->
</script>


<form name="testform">
<input type="text" name="testtext1" onBlur="lasttext=this;">
<input type="text" name="testtext2" onBlur="lasttext=this;">
<input type="text" name="testtext3" onBlur="lasttext=this;">

</form>
<a href="#" onClick="doinsert_ie();">Insert IE</a>
<br>
<a href="#" onClick="doinsert_ff();">Insert FF</a>
</body></html>

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

Ответ 2

Обратите внимание, что если пользователь нажимает кнопку, фокус на текстовом поле будет потерян и не будет позиции каретки!

Ответ 3

В свете вашего обновления:

var inputs = document.getElementsByTagName('input');
var lastTextBox = null;

for(var i = 0; i < inputs.length; i++)
{
  if(inputs[i].getAttribute('type') == 'text')
  {
    inputs[i].onfocus = function() {
      lastTextBox = this;
    }
  }
}

var button = document.getElementById("YOURBUTTONID");
button.onclick = function() {
  lastTextBox.value += 'PUTYOURTEXTHERE';
}

Ответ 4

перебрать все поля ввода... найдя тот, у которого есть фокус. затем, когда у вас есть текстовая область... вы должны быть способны сделать что-то вроде...

myTextArea.value = 'текст для вставки в текстовую область идет здесь;

Ответ 5

Я не уверен, что вы можете захватить позицию каретки, но если можете, вы можете избежать озабоченности Джейсона Коэна, захватив местоположение (по отношению к строке), используя текстовое поле onblur.

Ответ 6

В предыдущем ответе удаленная версия кода @bmb хорошо работает и для перемещения курсора в конце вставленных символов:

var lasttext;

function doinsert_ie() {
 var ttInsert = "bla";
 lasttext.focus();
 var sel = document.selection.createRange();
 sel.text = ttInsert;
 sel.select();
}

function doinsert_ff() {
 var oldtext = lasttext.value;
 var curposS = lasttext.selectionStart;
 var curposF = lasttext.selectionEnd;
 pretext = oldtext.substring(0,curposS);
 posttest = oldtext.substring(curposF,oldtext.length);
 var ttInsert='bla';
 lasttext.value = pretext + ttInsert + posttest;
 lasttext.selectionStart=curposS+ttInsert.length;
 lasttext.selectionEnd=curposS+ttInsert.length;
}