Виявити зворотний простір та дель при події “введення”?


93

Як це зробити?

Я намагався:

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

але це не працює ...

Якщо я роблю те саме для події натискання клавіші, це працює, але я не хочу використовувати натискання клавіші, оскільки вона видає набраний символ у моєму полі введення. Мені потрібно вміти це контролювати


мій код:

  $('#content').bind('input', function(event){

    var text = $(this).val(),
        key = event.which || event.keyCode || event.charCode;

    if(key == 8){
      // here I want to ignore backspace and del
    }

    // here I'm doing my stuff
    var new_text = 'bla bla'+text;
    $(this).val(new_text);
  });

жоден символ не повинен додаватися до мого введення, крім того, що я додаю за допомогою val (), фактично введення від користувача слід повністю ігнорувати, для мене важлива лише дія натискання клавіші


3
Насправді вам не потрібно виконувати операцію or'ing - event.wich, що добре, jQuery нормалізує для вас об'єкт події. Дивіться api.jquery.com/category/events/event-object
Ніко

Ви повинні вказати назву події як перший аргумент .bind, а не селектор. Має бути$('content').bind('keypress', ...
pmrotule

Відповіді:


119

Використовуйте .onkeydownта скасуйте видалення за допомогою return false;. Подобається це:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

Або з jQuery, тому що ви додали тег jQuery до свого запитання:

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});

U


19
Що робити, якщо ви хочете вловити введення за допомогою клацання правою кнопкою миші> вставки?
ctb

6
keydownне працює в Chrome Android, він повертає порожнечу при натисканні назад або del
Kosmetika

2
У функції ми повинні зберегти подію як параметр, тоді лише вона буде працювати як функція (подія) -------------------------- var input = document. getElementById ('myInput'); input.onkeydown = функція (подія) {var key = event.keyCode || event.charCode; якщо (ключ == 8 || ключ == 46) повернути false; };
Anurag_BEHS

1
з jQuery він внутрішньо фільтрує enterта backspaceклавіші inputподій, і ці натискання клавіш не досягають
vsync

@Wouter - Не те, що це велика справа, але я думаю, що в коді для jquery є помилка. Я думаю, ви мали намір додати ім'я параметра "подія" до обробника подій, що вмикається.
RoboBear

14

За допомогою jQuery

Event.which властивість нормалізує event.keyCode і event.charCode. Рекомендується спостерігати за подією. Яка для введення клавіші на клавіатурі.

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});

2
Я давно використовую jQuery, але цього не бачив. Завжди добре дізнатися щось нове. +1!
Sablefoste

9

event.key === "Backspace"

Більш недавні та набагато чистіші: використовуйте event.key. Більше ніяких довільних цифрових кодів!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

Підтримувані браузери


Іноді event.key повертає "Процес" з причини, яку я не можу зрозуміти ...
Оскар Чемберс

Це підтримуваний браузер. У вас може бути помилка, або, можливо, ваша власна клавіатура не запускає події клавіатури
Гіболт,

3

Ви пробували використовувати "onkeydown"? Це подія, яку ви шукаєте.

Він працює до введення вводу і дозволяє скасувати введення символу.


але як його скасувати? тому що я використовую val () на вході, і він все одно додає набраний символ
Алекс

3
Як щодо event.preventDefault()?
Ніко

Ви можете просто return false;скасувати будь-яку подію, використовуючи jQuery.
iMoses

3

Це старе запитання, але якщо ви хотіли вловити зворотну подію при введенні, а не введення клавіш, натискання клавіш або клавіатуру - як я помітив, будь-яка з цих функцій порушує певні написані мною функції та спричиняє незручні затримки при автоматичному форматуванні тексту —Ви можете вловити зворотний простір за допомогою inputType:

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});

3

keydown з event.key === "Backspace" or "Delete"

Більш недавні та набагато чистіші: використовуйте event.key. Більше ніяких довільних цифрових кодів!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Сучасний стиль:

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Mozilla Docs

Підтримувані браузери



0
//Here's one example, not sure what your application is but here is a relevant and likely application 
function addDashesOnKeyUp()
{
    var tb = document.getElementById("tb1"); 
    var key = event.which || event.keyCode || event.charCode;

    if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) ) 
    {
        tb.value += "-"
    } 
}

0

на пристроях Android, що використовують хром, ми не можемо виявити зворотний простір. Ви можете використовувати обхідний шлях для цього:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })

Я дійсно не хочу, щоб це була відповідь, але, схоже, є, оскільки вони встановили whichі keyCodeдо 229. Скоріше повинен бути кращий спосіб, або кращий шлях, але я буду використовувати в основному це поки що. ..
JohnnyFun
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.