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


95

그렇게하는 방법?

나는 시도했다 :

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 이벤트를 수행 할 필요가 없습니다. 이것은 괜찮습니다. jQuery는 이벤트 객체를 정규화합니다. 참조 api.jquery.com/category/events/event-object
니코

.bind선택자가 아닌 의 첫 번째 인수로 이벤트 이름을 넣어야합니다 . 되어야합니다$('content').bind('keypress', ...
pmrotule

답변:


123

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


19
마우스 오른쪽 버튼 클릭> 붙여 넣기에서 입력을 포착하려면 어떻게해야합니까?
ctb

6
keydown하지 크롬 안드로이드에서 작동, 그것은 emptyness을 반환 할 때 딸깍 백 스페이스 또는 델
KOSMETIKA

2
함수에서 우리는 이벤트를 매개 변수로 유지해야합니다. 그러면 function (event) -------------------------- var input = document처럼 작동합니다. getElementById ( 'myInput'); input.onkeydown = function (event) {var key = event.keyCode || event.charCode; if (key == 8 || key == 46) false 반환; };
Anurag_BEHS

1
jQuery를 사용하면 내부적 으로 이벤트를 필터링 enter하고 backspace키를 input누르지 만 이러한 키를 눌러도 도달하지 않습니다
vsync

@Wouter-큰 문제는 아니지만 jquery 코드에 오타가 있다고 생각합니다. on-keydown 이벤트 핸들러에 매개 변수 이름 "event"를 추가하려고했다고 생각합니다.
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

10

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

더 최근에 더 깔끔하게 : event.key. 더 이상 임의의 숫자 코드가 없습니다!

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

Mozilla 문서

지원되는 브라우저


가끔 event.key가 이해할 수없는 이유로 "Process"를 반환합니다 ...
Oscar Chambers

지원되는 브라우저입니다. 버그가 있거나 사용자 정의 키보드가 keydown 이벤트를 발생시키지 않을 수 있습니다
Gibolt

3

'onkeydown'을 사용해 보셨습니까? 이것은 당신이 찾고있는 이벤트입니다.

입력이 삽입되기 전에 작동하며 문자 입력을 취소 할 수 있습니다.


하지만 어떻게 취소합니까? 입력에 val ()을 사용하고 있고 여전히 입력 된 문자를 추가하기 때문입니다
Alex

3
어때요 event.preventDefault()?
Niko 2012 년

return false;jQuery를 사용할 때 간단히 이벤트를 취소 할 수 있습니다 .
iMoses

3

오래된 질문이지만 키 다운, 키 누름 또는 키업이 아닌 입력시 백 스페이스 이벤트를 포착하려는 경우 이러한 기능 중 하나가 내가 작성한 특정 기능을 중단하고 자동화 된 텍스트 서식 지정으로 어색한 지연을 유발하는 것을 발견했습니다. — inputType을 사용하여 백 스페이스를 잡을 수 있습니다.

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

3

keydownevent.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 문서

지원되는 브라우저



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

크롬을 사용하는 안드로이드 기기에서는 백 스페이스를 감지 할 수 없습니다. 이에 대한 해결 방법을 사용할 수 있습니다.

var oldInput = '',
    newInput = '';

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

난 정말이 해답이 될 싶지 않아,하지만 그것은 그들이 설정 이후가 될 것으로 보인다 whichkeyCode229에 더 좋은 방법, 또는 곧 더 나은 방법이 있어야합니다,하지만 지금은 기본적으로이 사용됩니다. ..
JohnnyFun
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.