Отмена Backspace и нажатие всех клавиш внутри текстового поля

Question

У меня следующий пример кода на https://js.do/sun21170/254818

Моя цель - предотвратить редактирование текста внутри текстового поля без использования атрибута readOnly или disabled . В приведенном выше демонстрационном коде я отменяю событие keyup при нажатии Backspace, но это не имеет никакого эффекта.

Вопрос : Можно ли отменить нажатие клавиши Backspace с помощью JavaScript или jquery внутри текстового поля без использования атрибута readOnly или отключенного атрибута текстового поля?

Код моей демонстрации также вставлен ниже.

function keyPressed(e) { 
  e.preventDefault();
}
       
function keyUp(e) {
  e.preventDefault();
}

#text1 {
  width:500px;
}

<input type="text" id="text1" onkeypress="keyPressed(event)"     
         onkeyup="keyUp(event)" value="This is some text that should not be editable"></input>

Answer 1

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

$('.notEditable').on('change keydown', function(e){
        	e.preventDefault();
});

#text1 {
      width:500px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" class="notEditable" value="This is some text that should not be editable"></input>

Этот код немного чище, так как вам нужно только добавить класс и не нужно вызывать функции в HTML-коде. Однако, если вы хотите сохранить вызов функции в своем коде, просто измените поле ввода на следующее:

<input type="text" id="text1" onkeypress="keyPressed(event)" onkeydown="keyUp(event)" value="This is some text that should not be editable"></input>

Answer 2

Вы можете использовать приведенный ниже фрагмент кода:

$(document).keydown(function (e) {
                var element = e.target.nodeName.toLowerCase();
                if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
                    if (e.keyCode === 8) {
                        return false;
                    }
                }
});

Определенные вещи, которые следует иметь в виду при реализации такой функциональности, вы должны также проверять готовность только textBoxes или textAreas, так как возврат в такой области приведет к тому, что вы покинете страницу (при условии, что вы также хотите предотвратить возврат) .

РЕДАКТИРОВАТЬ: код в jQuery.

Answer 3

Измените ваше onkeypress событие на onkeydown, и ваш код будет работать с backspace и кнопкой удаления. Событие onkeyup необязательно

<input type="text" id="text1" onkeydown="keyPressed(event)" value="This is some text that should not be editable"></input>

Answer 4

Я меняю onkeypress="keyPressed(event)" на onkeydown="keyPressed(event)", все работает.