포털의 검색결과 페이지에서는 키보드 입력시
자동으로 검색창에 포커스가 가게 되어 빠르게 검색할 수 있도록 하고 있습니다.
이와 같은 기능을 jQuery 로 구현해봤습니다.
(수정 110525 : 붙여넣기(Ctrl+V) 시 검색창에 붙여넣기 되도록 추가)
이렇게 하면 현재 포털사이트들과 같은 동작을 합니다.
이 상태로는 영어단어를 빠르게 검색할때 편리하며 주로 한글단어로 검색하는 경우엔
target_input.focus().select(); 부분을
target_input.focus().select(); return false; 으로 바꿔서 쓰는 것이 사용성이 좋을 것입니다.
자동으로 검색창에 포커스가 가게 되어 빠르게 검색할 수 있도록 하고 있습니다.
이와 같은 기능을 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; 으로 바꿔서 쓰는 것이 사용성이 좋을 것입니다.
"소스&팁" 카테고리의 다른 글
- 드림위버 CS5.5 코드힌트 문제 수정방법 (0) 2012/01/23
- 선택영역 색깔 바꾸기 (0) 2011/12/30
- 키보드 입력시 검색창에 포커스하기 (jQuery) (0) 2011/03/05
- Action Script 3.0 최적화 팁들.. (0) 2010/08/08
- [PHP] iPhone / iPod 로 접속하면 아이폰전용 페이지로 이동시키기 (0) 2009/12/20
Trackback
Trackback Address :: http://dohoons.com/blog/trackback/419
Comments