Как вставить символ в каретку с помощью JavaScript? - PullRequest
10 голосов
/ 10 сентября 2008

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

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

РЕДАКТИРОВАТЬ: Также можно вставить символ «последний» в ранее активном текстовом поле.

Ответы [ 6 ]

3 голосов
/ 12 сентября 2008

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

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

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

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

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

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

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

Если у вас есть позиция курсора, вы перезаписываете весь текст. Значение с помощью

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

Вот пример с отдельными ссылками для 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>

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

1 голос
/ 10 сентября 2008

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

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';
}
0 голосов
/ 18 января 2013

Битая версия кода @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;
}
0 голосов
/ 10 сентября 2008

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

0 голосов
/ 10 сентября 2008

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

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

0 голосов
/ 10 сентября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...