JavaScript setSelectionRange() и позиция курсора

Question

я следующий кусок JavaScript для динамически вставляя символы Юникода - представленного ниже переменной txtToIns - в тело текста

elmt.value = elmt.value.substring(0, elmt.selectionStart) + txtToIns + " " + elmt.value.substring(elmt.selectionStart, elmt.selectionEnd) + elmt.value.substring(elmt.selectionEnd, elmt.value.length) + " "; 
elmt.focus(); 
elmt.value = elmt.value.trim(); 

С выше курсора всегда в конце текста. Есть ли способ разместить его непосредственно после txtToIns? И нет, txtToIns.focus() не будет работать

Answer 1

Я не уверен, что вы пытаетесь сделать с символами пробела в значении textarea, особенно в последнем, который позже будет обрезан двумя строками, поэтому я проигнорировал пробелы в моем код ниже. Я также не уверен, что вы пытаетесь сделать с ранее выбранным текстом (если есть), поэтому я собираюсь предположить, что вы хотите перезаписать его новым текстом.

Имейте в виду, что это не будет работать в IE < 9, который не поддерживает selectionStart, selectionStart или setSelectionRange().

Демо: http://jsfiddle.net/timdown/wPfVn/

Код:

var val = elmt.value; 
var start = elmt.selectionStart, end = elmt.selectionEnd; 
elmt.value = val.slice(0, start) + txtToIns + val.slice(end); 
elmt.focus(); 
var caretPos = start + txtToIns.length; 
elmt.setSelectionRange(caretPos, caretPos); 

Answer 2

Когда вы измените значение, курсор переместится в конец. Вам придется вручную сбросить позицию курсора после изменения его значения.

Попробуйте это:

var start = elmt.selectionStart, 
    len = txtToIns.length, 
    pos = start + len; 
elmt.value = elmt.value.substring(0, start) + txtToIns + " " + elmt.value.substring(start) + " "; 
elmt.focus(); 
elmt.value = elmt.value.trim(); 
elmt.setSelectionRange(pos, pos, 0); 

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