Автоподстановка/автозамена символов в textarea

447

31 января 2017, 22:52

Есть textarea с id = "test".

1) Как сделать так, чтобы при вводе в textarea кавычек (одинарных или двойных), подставлялась сразу пара кавычек, а курсор ставился между ними (как в средах разработки, аля sublime) ?

2) Как сделать, что если ты вводишь пару кавычек, то их в итоге не стало бы 4, а просто удалились бы вторые кавычки (и в сумме их так и осталось бы 2 -- опять же, как это реализовано в редакторах кода).

т.е. надо, чтобы было так:

' → '.' (где . -- положение курсора)

" → "."

"" → "".

Answer 1

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

var input = document.getElementById('test'); 
input.addEventListener("keypress", function(evt){ 
if(evt.which === 34) 
{ 
	input.value = input.value + "\""; 
	setCaretPosition(input, input.value.lastIndexOf('"')) 
} 
 if(evt.which === 39) 
{ 
	input.value = input.value + "'"; 
	console.log(input.value.lastIndexOf("'")) 
	setCaretPosition(input, input.value.lastIndexOf("'")) 
} 
 
}) 
 
function setCaretPosition(elem, caretPos) { 
var range; 
 
if (elem.createTextRange) { 
    range = elem.createTextRange(); 
    range.move('character', caretPos); 
    range.select(); 
} else { 
    elem.focus(); 
    if (elem.selectionStart !== undefined) { 
        elem.setSelectionRange(caretPos, caretPos); 
    } 
} 
}