<HTML>
1 2 3 4 5 6 7 8 | <div class="col-sm-10"> <div class="col-sm-12"> <input type="hidden" name="memCode" id="memCode"/> <input type="hidden" name="value-keyword" id="value-keyword"/> <input type="hidden" name="str" id="str"/> <input type="text" class="col-xs-10 col-sm-10" id="memName" name="memName" autocomplete="off" placeholder="회원이름"> </div> </div> | cs |
아래 스크립트는 .keyup(), .keypress(), .autocomplete() 을 활용한 내용.
참고한 사이트:
http://findfun.tistory.com/284
http://blog.naver.com/junhwen/130158515885
http://javafactory.tistory.com/entry/jQueryEventkeydownkeypresskeyup-%ED%82%A4%EB%B3%B4%EB%93%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8
.keyup()
키보드를 누르고 있다가 뗄 떼 이벤트 발생
누른 키가 뭔지 확인하려면 event 객체 활용
브라우저가 event 객체 정보를 가지고 있으면 jQuery의 .which 속성을 사용해 키보드 키 활인 가능
예) event.which = 13 은 엔터키
실제 텍스트를 잡아내려면 .keyup() 보다는 .keypress()를 사용
영어는 .keypress() 이벤트 사용 가능하지만 한글은 지원하지 않아 .keyup() 사용해야 한다
.keypress()
키보드가 입력 받았을 때 이벤트 발생
키 누름을 감지할 필요가 있을 때
.keydown() 와 비슷하지만 키를 반복적으로 누를 때 다름
키를 계속 누르고 있다면 .keydown() 은 이벤트 한 번 발생, .keypress() 는 문자 찍힐 때마다 이벤트 발생
보조키(shift) 누르면 .keydown() 은 이벤트 발생, .keypress() 는 이벤트 발생하지 않음.
그러나 .keypress() 는 공식적으로 지원하지 않는 함수. 브라우저별, 브라우저 버전별, 플랫폼에 따라 다르게 동잘 할 수 있음.
keydown() - 키보드가 눌러질 때 발생
keypress() - 글자가 입력될 때 발생
keyup() - 키보드가 떼어질 때 발생
<Script>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | $(document).ready(function(){ //회원명 입력시 회원정보 가져오기 $("#memName").keyup(function(){ $("#value-keyword").val($(this).val()); }); $("#memName").keypress(function(e){ if(e.which == 13){ $(this).blur(); }; }); $("#memName").autocomplete({ source: function(request, response){ $.ajax({ url : "getMemMobileInfo.do", type : "post", data : {memName: $("#value-keyword").val()}, success : function(data){ response($.map(data.DataList, function(item){ return{ label: item.STR, value: item.STR, memCode: item.MEM_CODE, memTypeInput: item.MEM_TYPE_INPUT, memType: item.MEM_TYPE, pushYn: item.PUSH_YN, deviceInput: item.DEVICE_INPUT, device: item.DEVICE, deviceId: item.DEVICE_ID }; })) }, error : function(request, status, error){ alert("회원 이름으로 정보를 불러오는 중 오류가 발생하였습니다.") } }); }, position: {my: "right top", at: "right bottom"}, minLENGTH: 2, focus: function(event, ui){ return false; }, select: function(event, ui){ if (ui.item.pushYn == 'N') { alert("푸시알림을 거부한 회원은 선택할 수 없습니다."); return false; } //TBL_MEM_MOBILE_INFO. DEVICE 디바이스구분(A:안드로이드, I:아이폰) //TBL_PUSH_NOTICE. OS_TYPE OS(1:안드로이드, 2:아이폰, 3:전체) if (ui.item.device == 'A') { $("#osType").val("1"); } else if (ui.item.device == 'I' ) { $("#osType").val("2"); }; //TBL_MEM_MST. MEM_TYPE 회원종류(0:일반회원, 1:부동산회원) //TBL_PUSH_NOTICE. MEM_TYPE 회원종류(1:비중개회원, 2:중개회원, 4:분양회원, 7:전체) //5:비중개회원(개별), 6:중개회원(개별) if (ui.item.memType == '0') { $("#memType").val('5'); } else if (ui.item.memType == '1') { $("#memType").val('6'); }; $("#memCode").val(ui.item.memCode); $("#device").val(ui.item.device); $("#osTypeInput").val(ui.item.deviceInput); $("#memTypeInput").val(ui.item.memTypeInput); $("#memName").blur(); }, open: function(e, ui){ $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function(){ $(this).removeClass("ui-corner-top ui-autocomplete-loading").addClass("ui-corner-all"); } }); }) | cs |
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? (0) | 2016.07.07 |
| Ajax (0) | 2016.05.12 |