Как на JavaScript сымитировать нажатие кнопки BACKSPACE
несколько раз?
-
А что делает нажатие backspace? Стирает текст? Или перемещается назад по истории?– vp_arthCommented 17 мар. 2017 в 13:47
-
@vp_arth стирает текст– АнатолийCommented 17 мар. 2017 в 14:55
-
это событие клавиатуры. К кому-то должен быть фокус ввода. Раз надо имитация - вызовите обработчик кейдауна с кодом бакспейса– DNSCommented 17 мар. 2017 в 18:56
Добавить комментарий
|
1 ответ
Надо понимать одну особенность:
Вызвать в JS событие довольно просто:
let test = document.querySelector('#test');
document.querySelector('#bsTrigger').addEventListener('click', _ => {
test.dispatchEvent(new KeyboardEvent("keydown", {keyCode: 8, key: 'Backspace'}))
});
test.addEventListener('keydown', function(e){
console.info('Keydown event', e.key);
});
<input type='text' id='test' value='Text' /><br />
<input type='button' id='bsTrigger' value='Backspace' />
Однако заставить браузер применить своё дефолтное действие - проблема.
Проще воссоздать его действие самому, через JS:
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
function resetCursor(txtElement, currentPos) {
if (txtElement.setSelectionRange) {
txtElement.focus();
txtElement.setSelectionRange(currentPos, currentPos);
} else if (txtElement.createTextRange) {
var range = txtElement.createTextRange();
range.moveStart('character', currentPos);
range.select();
}
}
function Backspace() {
var textarea = document.getElementById('txtArea');
var currentPos = getCaret(textarea);
var text = textarea.value;
var backSpace = text.substr(0, currentPos-1) + text.substr(currentPos, text.length);
textarea.value = backSpace;
resetCursor(textarea, currentPos-1);
}
#txtArea{
width: 230px;
}
<textarea id="txtArea" rows='3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea><br />
<button onclick="Backspace();">Backspace</button>
По мотивам ответа.