program story

"입력"이벤트에서 백 스페이스 및 del을 감지합니까?

inputbox 2020. 9. 19. 11:08
반응형

"입력"이벤트에서 백 스페이스 및 del을 감지합니까?


그렇게하는 방법?

나는 시도했다 :

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 ()으로 추가하는 것 외에 실제로 사용자의 입력은 완전히 무시되어야합니다. 키 누르기 동작 만 중요합니다.


으로 .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;
  });
});


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

event.key === "백 스페이스"

More recent and much cleaner: use event.key. No more arbitrary number codes!

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

Mozilla Docs

Supported Browsers


Have you tried using 'onkeydown'? This is the event you are looking for.

It operates before the input is inserted and allows you to cancel char input.


$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});

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

More recent and much cleaner: use event.key. No more arbitrary number codes!

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

Mozilla Docs

Supported Browsers


//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 += "-"
    } 
}

on android devices using chrome we can't detect a backspace. You can use workaround for it:

var oldInput = '',
    newInput = '';

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

It's an old question, but if you wanted to catch a backspace event on input, and not keydown, keypress, or keyup—as I've noticed any one of these break certain functions I've written and cause awkward delays with automated text formatting—you can catch a backspace using inputType:

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

참고URL : https://stackoverflow.com/questions/9906885/detect-backspace-and-del-on-input-event

반응형