1

Как на JavaScript сымитировать нажатие кнопки BACKSPACE несколько раз?

3
  • А что делает нажатие backspace? Стирает текст? Или перемещается назад по истории?
    – vp_arth
    Commented 17 мар. 2017 в 13:47
  • @vp_arth стирает текст Commented 17 мар. 2017 в 14:55
  • это событие клавиатуры. К кому-то должен быть фокус ввода. Раз надо имитация - вызовите обработчик кейдауна с кодом бакспейса
    – DNS
    Commented 17 мар. 2017 в 18:56

1 ответ 1

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>

По мотивам ответа.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.