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

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

вот мой текущий код (СЕЙЧАС ВКЛЮЧАЯ 2 ТЕКСТОВЫХ БЛОКА):

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

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


person sadmicrowave    schedule 15.04.2010    source источник


Ответы (9)


Я думаю, это поможет:

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

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

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

person Karl Johan    schedule 15.04.2010
comment
Событие не запускается здесь для возврата на место - person Giorgio Luparia; 20.12.2012
comment
Вы правы, keypress не срабатывает при возврате. Iv'e обновился до keydown и теперь работает. Спасибо за замечание - person Karl Johan; 20.12.2012
comment
Отлично, это работает. Я изменил проверку условий на $ (document.activeElement) .is (input [type = text]), поскольку я не использую такой класс. При необходимости можно добавить другие типы. - person Giorgio Luparia; 20.12.2012
comment
На мой взгляд, ответ от @ rybo111 лучше, потому что тогда не нужно применять класс ко всему, потому что он не смотрит на: focus, но на activeElement (который уже имеет фокус), и потому что он включает INPUT и TEXTAREAs . stackoverflow.com/a/17278620/105539 - person Volomike; 09.11.2015
comment
Backspace не регистрируется как событие клавиатуры в Chrome, но регистрируется в Firefox. - person Gokhan Demirtas; 03.12.2015
comment
@Volomike В исходном вопросе автор вопроса хотел отключить обратное пространство во всех полях ввода, кроме двух. Вот почему моему ответу нужен специальный класс, чтобы он мог выбирать, какие входы должны принимать backspace. - person Karl Johan; 04.12.2015

Это отключит обратное пространство на вашем сайте без необходимости добавлять определенные классы в поля ввода. Чтобы отключить обратное пространство, кроме случаев использования полей ввода, используйте .is ("input: focus"), если вы хотите отключить обратное пространство, за исключением случаев использования полей текстового поля, используйте .is ("input: focus, textarea: фокус ")

$(document).keypress(function(e){ 
    var elid = $(document.activeElement).is("input:focus"); 
    if(e.keyCode === 8 && !elid){ 
       return false; 
    }; 
});
person Hudson-Peralta    schedule 22.11.2011
comment
И input, и textarea должны поддерживать backspace - person Christophe Roussy; 25.06.2012
comment
Если это уже активный элемент, зачем проверять и событие: focus? - person Volomike; 09.11.2015

Решение 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.

person Jpsy    schedule 13.11.2012
comment
Ты совершенно прав, Томас! Я соответствующим образом исправил свой ответ. В проекте, где я сам использую этот код, я также использую keydown, но, чтобы соответствовать обсуждаемым здесь вопросам, я скопировал и изменил существующие блоки из этого обсуждения и представил ошибку. Прости. - person Jpsy; 04.02.2013
comment
Зачем сосредотачиваться только на INPUT [type = text], а не на всех INPUT? Если это уже активный элемент, зачем искать только по элементам: focus? - person Volomike; 09.11.2015
comment
Вы также должны разрешить input[type="number"] и input[type="password"] - person outofmind; 08.12.2015
comment
Полностью согласен, @outofmind. Я отредактировал ответ. Спасибо! - person Jpsy; 08.12.2015

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

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

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

$(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 вместо этого, что не позволяет пользователю покинуть страницу, если он вписала что-нибудь.

person rybo111    schedule 24.06.2013
comment
Этот ответ следовало выбрать как лучший, потому что он наиболее полный. Спасибо за это - сегодня я успешно использовал его с виджетом QWebView в приложении Qt / C ++. - person Volomike; 09.11.2015

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

person Wulf    schedule 04.11.2011
comment
Выглядит потрясающе, но не работает в Chrome, потому что у него нет Event.observe. Я также засунул его в $ (document) .ready (function () {... застрял здесь ...}, потому что вы сказали, что его нужно прикрепить после полной загрузки DOM. - person Volomike; 09.11.2015
comment
@Volomike Извините, я должен был пояснить, что это решение, основанное на прототипе инфраструктуры javascript (prototypejs.org ). Это похоже на jquery, только хуже. - person Wulf; 02.12.2015

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

$(document).keydown(function(e){ 
            var elid = $(document.activeElement).is("input:focus"); 
            if(e.keyCode === 8 && !elid){ 
               e.preventDefault(); 
            }; 
        });
person Cobol    schedule 17.02.2012
comment
Не поддерживает ТЕКСТАРУ. - person Volomike; 09.11.2015

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

person Raju Sarvasiddi    schedule 17.10.2012

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

ИЗМЕНИТЬ
3. Включите также поле пароль, добавив "input [type = password]: focus",

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

    });

person JK ABC    schedule 29.01.2013