키 누르기 이벤트 후 jquery .val ()을 어떻게 얻을 수 있습니까?


101

나는 얻었다 :

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

이제 경고는 항상 키를 누르기 전에 값을 반환합니다 (예 : 필드가 비어 있고 'a'를 입력하고 경고가 ''를 제공합니다. 그런 다음 'b'를 입력하면 경고가 'a'를 제공합니다 ...). 하지만 키를 누른 후 값을 원합니다. 어떻게해야합니까?

배경 : 텍스트 필드에 하나 이상의 문자가 포함되는 즉시 버튼을 활성화하고 싶습니다. 따라서 모든 키 누르기 이벤트에서이 테스트를 실행하지만 반환 된 val ()을 사용하면 결과가 항상 한 단계 뒤처집니다. change () 이벤트를 사용하는 것은 텍스트 상자를 떠날 때까지 버튼이 비활성화되기 때문에 옵션이 아닙니다. 더 나은 방법이 있다면 기쁩니다!


텍스트가 삭제되면 버튼이 다시 비활성화되어야합니까? 그렇다면 아마도 키 누르기를 계속해야 할 것입니다.
Brilliand

답변:


152

변경 keypress하기 keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypress키를 눌렀을 때 발동되고, 키를 놓으면 keyup발동됩니다.


@Brilliand 당신이 맞아요. 이에 대한 해결 방법을 만들었으며 아래에 게시되어 있습니다.
David Oliveros 2014-01-26

7
아이폰 / 안드로이드 기기에서 이걸 어떻게 준수합니까? 키업 기능을 지원하지 않습니다.
Merijn Den Houting 2014 년

4
키 누르기의 정의가 정확하지 않습니다. 그것이 keydown의 정의입니다. quirksmode.org/dom/events/keys.html
challet

59

아무도 js "입력"이벤트를 언급하지 않았다는 사실에 놀랐습니다.

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

추천합니다.

https://developer.mozilla.org/en-US/docs/Web/Events/input


8
와우, 이것은 답변이 없거나 잘못 답변 된 몇 가지 질문에 대한 답변입니다.
Ben Racicot 2015

4
입력 필드에서 화살표 키, Shift 등을 누르는 것을 무시해야 할 때도 좋습니다.
hovado

2
caniuse.com/#search=input 비교적 우수한 브라우저 지원. 모든 키업을 듣는 것보다 훨씬 더 나은 대답입니다.
James Haug

1
그것은 내 하루를 구합니다! 감사합니다. 다음 코드를 사용했습니다. $ ( '. subject_mark'). on ( "input", function () {var $ th = $ (this); $ th.val ($ th.val (). replace (/ [^ 0-9] / g, function (str) {return '';}));
arsho


5

또는 시간 제한이 0 인 keydown 이벤트를 사용할 수 있습니다.

이렇게하면 사용자가 키를 누르는 것을 중지 할 때 적용되는 대신 변경 사항이 즉시 적용됩니다.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

백 스페이스 키를 누르고있는 경우에도 여전히 이상하게 작동합니다. 타임 아웃이 0 인 키 누름일까요?
Brilliand

아, 신경 쓰지 마세요. OP는 텍스트 필드가 지워지면 어떤 일이 발생해야하는지 지정하지 않습니다.
Brilliand

4

onchange키 이벤트를 사용하는 대신 이벤트 핸들러 를 연결할 수 있습니다 .

$(someTextInputField).change(function() {
    alert($(this).val());
});

사용 Edit > Paste하거나 마우스 오른쪽 단추로 클릭 한 변경 이벤트가 발생합니다 붙여 넣기 한 후하지만 키 이벤트. 참고 일부 붙여 넣기에 키 이벤트를 시뮬레이션 할 수 있습니다 브라우저 (내가 어떤 알고하지 않습니다하지만)하지만 당신은 할 수없는 의지 하는 행동.


4

다음과 같이 시도하십시오.

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

이는 단순히 시간 제한을 도입하여 "keypress"이벤트 루프가 완료된 후 코드가 거의 즉시 실행되도록합니다. 이러한 짧은 타이머 간격 (브라우저에서 반올림하더라도)은 눈에 띄지 않습니다.

편집 — 또는 다른 사람들이 말하는 것처럼 "keyup"을 사용할 있지만 그 의미는 다릅니다.


그것은 유익한 스마트 문제가 아닙니다 . keyup 이벤트는 동일한 결과를 제공하지 않습니다. keyup을 사용하여 shift, ctrl 등의 고유 한 이벤트를 얻습니다. shift 또는 ctrl 키의 상태를 확인해야하는 일련의 키 이벤트가 아닌 실제 문자 (예 : 앰퍼샌드)를 입력하려면 키를 누르십시오. 갈 길입니다.
Ripside 2015-06-05

1
권리; 그것이 제가 "의미가 다르다"는 의미입니다.
Pointy
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.