Как отключить backspace, если все, кроме поля ввода, сосредоточено на использовании jquery


Как отключить нажатие клавиши backspace, если все, кроме 2 конкретных полей ввода, сосредоточено на использовании jquery?

Вот мой текущий код (теперь включая 2 текстовых поля):

$(document).keypress(function(e){
  var elid = $(document.activeElement).attr('id');
  if(e.keyCode === 8 && elid != 'textbox1' || elid != 'textbox2'){
      return false;
  };
});

Однако это не работает....есть идеи?

9 8

9 ответов:

Я думаю, что это сделает трюк:

$(document).keydown(function(e) {
    var elid = $(document.activeElement).hasClass('textInput');
    if (e.keyCode === 8 && !elid) {
        return false;
    };
});

Предполагая, что текстовые поля имеют класс 'textInput'.

Вот рабочий пример

Это отключит backspace на вашем сайте без необходимости добавлять определенные классы в поля ввода. Чтобы отключить клавишу Backspace, за исключением при использовании входа использовать коробки .это("вход:Фокус") Если вы хотите отключить клавишу Backspace, за исключением при использовании текстовой области использование коробки .это("вход:внимание, это:Фокус")

$(document).keypress(function(e){ 
    var elid = $(document.activeElement).is("input:focus"); 
    if(e.keyCode === 8 && !elid){ 
       return false; 
    }; 
});

Решение Hudson-Peralta + QF_Developer отлично, но у него есть один недостаток:
Если вы фокусируетесь на переключателе или флажке, кнопка backspace все равно выбросит вас из страницы. Вот модификация, чтобы избежать этого разрыва:

$(document).keydown(function(e){ 
  var elid = $(document.activeElement).is('input[type="text"]:focus, textarea:focus'); 
    if(e.keyCode === 8 && !elid){ 
      return false; 
    }; 
});

Править 20130204:
keypress() заменено на keydown()!
Приведенный выше код теперь работает правильно.

Править 20151208:
Как уже упоминалось в комментарии @outofmind, существует больше типов ввода, которые могут отбросить вас назад при нажатии кнопки backspace. Пожалуйста, добавьте в разделенный запятыми список селекторов метода is () любой тип полей ввода, которые допускают прямой ввод символов и которые действительно используются в вашем HTML-коде, например input[type="password"]:focus, input[type="number"]:focus или input[type="email"]:focus.

Я думаю, что небольшая модификация необходима для обработки текстовых областей:

var elid = $(document.activeElement).is("input:focus, textarea:focus"); 

Я внес небольшое изменение в принятый ответ, который может быть кому-то полезен:

$(document).keydown(function(e) {
    var elid = $(document.activeElement).is("input, textarea") ;
    if (e.keyCode === 8 && !elid) {
        if(e.ctrlKey) {
            window.history.back()
        }
        else {
            alert("Navigating with Backspace has been disabled. Use CTRL + Backspace if you want to go back to the previous page (and lose any unsaved changes).");
            return false;
        }
    }
});

С помощью этого метода пользователь все еще может перемещаться с помощью Backspace, удерживая CTRL, но также он учитывает textarea, а также любые input.

Конечно, альтернативой является использование чего-то вроде this, что не позволяет пользователю покинуть страницу, если он что-то ввел.

@Nick Craver, позорный ответ по нескольким причинам. Отвечай на вопрос или хотя бы снисходительно относись к нему.

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




        // event handlers must be attached after the DOM is completely loaded
        Event.observe(window, 'load', function() {
          // keypress won't fire for backspace so we observe 'keydown'
          Event.observe(window, 'keydown', function(event){
            // 8 == backspace
            if( event.keyCode == 8) {
                // with no field focused, the target will be HTMLBodyElement
               if( event.target == document.body) {
                  // stop this event from propagating further which prevents                      
                  // the browser from doing the 'back' action
                  event.stop();
               }
             }
          });
        });

Ответ Хадсона-Перальты работал хорошо для меня, но я сделал небольшую модификацию, так как я использую много событий keydown:

$(document).keydown(function(e){ 
            var elid = $(document.activeElement).is("input:focus"); 
            if(e.keyCode === 8 && !elid){ 
               e.preventDefault(); 
            }; 
        });

Я тоже много работал над тем же самым. В конце концов, я нашел ответ и для удобства всех разместил решение на http://blog.totusinfo.com/jquery-disable-backspace-for-document-history-except-inputs-and-textarea/

Я изменил ответ немного больше, чтобы объединить хороший ответ каждого
1. используется селектор "input[type=text]: focus, textarea: focus" для поддержания поведения по умолчанию для этих элементов и, как сказал JPsy, для предотвращения поведения по умолчанию на входах, таких как checkbox
2. использовал e. target вместо того, чтобы сделать код более зависимым исключительно от JQuery, так как я не уверен, что каждый браузер поддерживает документ.activeElement ну

EDIT
3. Include password поле также по добавление "input[type=password]: фокус",

     $(document).keydown(function(e){

          var code=e.keyCode;
          var is_to_stop= (!$(e.target).is("input[type=text]:focus, input[type=password]:focus, textarea:focus")) && (code==8);
          if(is_to_stop){
            return false;
          }

    });