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

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

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

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

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

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>


javascript jquery onkeypress onkeyup
person Sunil    schedule 30.10.2018    source источник
comment
почему вы не можете использовать атрибут только для чтения?   -  person madalinivascu    schedule 30.10.2018
comment
Да, можно отменить нажатие клавиши Backspace с помощью JavaScript или jquery.   -  person Pirai Sudie    schedule 30.10.2018
comment
@madalinivascu, я не могу использовать атрибуты только для чтения или отключенные атрибуты, потому что в моем сложном сценарии есть текстовая область, и клавиши должны быть отключены, когда курсор находится только в определенных словах.   -  person Sunil    schedule 30.10.2018

Ответы (4)


arrow_upward
2
arrow_downward

Меняю onkeypress="keyPressed(event)" на onkeydown="keyPressed(event)", работает.

person The KNVB    schedule 30.10.2018
comment
Я тестировал это на последних версиях Firefox, Edge, IE 11 и Chrome. Это работало на всех из них. Вы знаете, поддерживает ли Safari это? У меня нет Mac, иначе я бы проверил. - person Sunil; 30.10.2018

arrow_upward
0
arrow_downward

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

$(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;
                    }
                }
});

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

РЕДАКТИРОВАТЬ: код находится в jQuery.

person HellHammer    schedule 30.10.2018

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Я думаю, вам нужно вызвать событие 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>
person Patrick Schocke    schedule 30.10.2018