키보드 입력시 검색창에 포커스하기 (jQuery)

포털의 검색결과 페이지에서는 키보드 입력시
자동으로 검색창에 포커스가 가게 되어 빠르게 검색할 수 있도록 하고 있습니다.
이와 같은 기능을 jQuery 로 구현해봤습니다.

(수정 110525 : 붙여넣기(Ctrl+V) 시 검색창에 붙여넣기 되도록 추가)

$(document).ready(function() {
    var target_input = $('#keyword'); // 포커스 인풋
    var chk_short = true;

    $(document).bind("keydown keyup", function(e) {
        var key = e.keyCode;
        var tg = e.target;
        if(tg.tagName == "INPUT" ||  tg.tagName == "TEXTAREA") return true;
        
        var specific = key >= 8 && key <= 46;
        if(e.type == "keydown") {
            if(specific) {
                chk_short = false;
                return true;
            }
            if(!specific && chk_short) {
                target_input.focus().select();
                //target_input.focus().select(); return false;
            }
            if(e.ctrlKey && e.keyCode == 86){
                target_input.focus().select();
            }
        } else {
            if(specific) {
                chk_short = true;
            }
        }
    });
    
    $("input, textarea").bind("blur", function() {
        chk_short = true;
    });
});

이렇게 하면 현재 포털사이트들과 같은 동작을 합니다.

이 상태로는 영어단어를 빠르게 검색할때 편리하며 주로 한글단어로 검색하는 경우엔
target_input.focus().select(); 부분을
target_input.focus().select(); return false; 으로 바꿔서 쓰는 것이 사용성이 좋을 것입니다.

“키보드 입력시 검색창에 포커스하기 (jQuery)”에 대한 2개의 생각

  1. 포스트 잘보고갑니다!

    궁금한점이있는데

    위에 소스를 사용해보니

    한글로 입력시 첫번째로 누르는 키는 먹히지 않는 것같습니다..(익스에서)

    그러니까 예를들면

    ‘다음’이라는 글을 입력하려고했다면

    첫번째 ‘ㄷ’을 누를때 인풋에 포커스되고

    ‘ㅏ음’이렇게 입력이 되는것입니다.

    이건 어떻게 해결하면좋을까요..?

    1. 글쎄요..
      그런데 현재 시점에서 네이버나 다음의 경우는
      한글상태에서 포커싱해도 영문으로 아예 바뀐후에 입력되네요.

      어떤 방법이 말씀하신 증상에 대해
      사용성이 더 좋을지는 더 고민해봐야겠습니다.

      이 코드로는 일단 target_input.focus().select(); 까지만 사용하는게 나을 것 같습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.