Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hacosa j query 10th

914 views

Published on

하코사 jQuery 스터디 Ch.10

Published in: Education, Technology, Business
  • Be the first to comment

Hacosa j query 10th

  1. 1. HACOSA jQuery STUDY#10. HTML 폼의 기능 강화하기(직접개발)
  2. 2. 페이지 로드 시에 input 요소에 포커스 주기• $(selector).focus method 사용 $(‘#username’).focus();
  3. 3. 폼 요소들을 활성/비활성화하기• .attr(), .removeAttr() method 사용 // Markup은 p.314 참고 $(“#sameAsShipping”).change(function(){ if(this.checked){ $(“#billingInfo input:text”).attr(“disabled”, “disabled”); }else{ $(“#billingInfo input:text”).removeAttr(“disabled”); } });
  4. 4. 폼 요소들을 활성/비활성화하기$(“#sameAsShipping”).change(function(){ if(this.checked){ $(“#billingInfo input:text”).attr(“disabled”, “disabled”).each(function(i){ // ShippingInfo에 해당하는 text box의 내용을 변수로 담아서 var valueFromShippingInput = $(“#shippingInfo input:text:eq(“+ i + “)”).val(); // billingInfo의 text box에 삽입 $(this).val(valueFromShippingInput ); }); }else{ $(“#billingInfo input:text”).removeAttr(“disabled”); }}).trigger("change");
  5. 5. 폼 요소들을 활성/비활성화하기$(“#shippingInfo input:text”).bind(“keyup change”, function(){ // Same as Shipping이 체크되어 있으면 실시간 update if($(“#sameAsShipping:checked”).length){ var i = $(“#shippingInfo input:text”).index(this); var valueFromShippingInput = $(this).val(); $(“#billingInfo input:text:eq(“ + i + “)”).val(valueFromShippingInput); }});
  6. 6. RadioButton 요소를 자동으로 선택하기$(“#chooseSource input:text”).blur(function(){ if($(this).val() != “”){ $(this).siblings(“input:radio”).attr(“checked”, true); }});‒ Other가 선택되면 자동으로 텍스트박스에 포커스 가도록 하기$(“#chooseSource input:text”).each(function(){ var $inputTxt = $(this); var $radioBtn = $inputTxt.siblings(“input:radio”); $inputTxt.blur(function(){ if($inputTxt.val() != “”){ $radioBtn.attr(“checked”, true); } }); $radioBtn.change(function(){ if(this.checked){ $inputTxt.focus(); } });});
  7. 7. 전용 링크를 사용하여 모든 Checkbox 요소들을 활성/비활성화하기• Select All / Deselect All 이라는 링크를 사용하여 checkbox 요소 들이 선택되고나 선택되지 않게 하기 $(“fieldset .selectAll”).click(function(event){ // 링크 이동 안 일어나도록 함 event.preventDefault(); $(this).siblings(“input:checkbox”).attr(“check”, “checked”); }); $(“fieldset .deselectAll”).click(function(event){ event.preventDefault(); $(this).siblings(“input:checkbox”).removeAttr(“checked”); });
  8. 8. 단일 토글을 사용하여 모든 checkbox 요소들을 선택/선택해제 하기• checkbox 요소의 토글을 이용하여 모든 checkbox 요소들을 선택하거나 선택해제하기 $(“filedset .toggle:checkbox”).each(function(){ var $toggle = $(this); var $checkboxes = $toggle.siblings(“input:checkbox”); $toggle.change(function(){ if(this.checked){ $checkboxes.attr(“checked”, “checked”); }else{ $checkboxes.removeAttr(“checked”); } }); });
  9. 9. Select 요소에 옵션 추가 및 제거하기• .appendTo() method 사용 ‒ <option> 추가 $(“#add”).click(function(event){ event.preventDefault(); var optionName = $(“newColorName”).val(); var optionValue = $(“newColorValue”).val(); $(“<option/>”.attr(“value”,optionValue).text(optionName).appendTo(“#colors”); }); ‒ <option> 제거 $(“#remove”).click(function(event){ event.preventDefault(); var $select = $(“#colors”); $(“option:selected”, $select).remove(); });
  10. 10. 문자의 개수에 의한 자동 탭 기능 구현하기$(“fieldset.autotab input”).bind(“keydown keyup”, function(event){ var keyCode = event.which; var ignoreKeyCodes = “,9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,”; if(ignoreKeyCodes.indexOf(“,” + keyCode + “,”) > -1){return;} // KeyDown의 경우 backspace 무시 if(keyCode == 8 && event.type == “keydown”){return;} var $this = $(this); var currentLength = $this.val().length; var maximumLength = $this.attr(“maxlength”); if(keyCode == 8 && currentLength == 0){ $this.prev().focus(); } if(currentLength == maximumLength){ $this.next().focus(); }});
  11. 11. 남아있는 글자의 개수를 표시하기• Textarea에 글자수 제한 걸었을 때 현재 남은 글자수 표기 $(“.remaining”).each(function(){ var $count = $(“.count”, this); var $input = $(this).prev(); var maximumCount = $count.text() * 1; var update = function(){ var before = $count.text() * 1; var now = maximumCount - $input.val().length; if(now < 0){ var str = $input.val(); $input.val(str.substr(0,maximumCount)); now = 0; } if(before != now) $count.text(now); } $input.bind(“input keyup paste”, function(){setTimeout(update,0)}); update(); });
  12. 12. 텍스트 input 요소에 특정 글자만을 수용하기• Keydown, blur event, 정규표현식 사용 $(“.onlyNumbers”).bind(‘keydown’,function(event){ var keyCode = event.which; var isStandard = (keyCode > 47 && keyCode < 58); // 키보드 숫자 var isExtened = (keyCode > 95 && keyCode < 106); // 키패드 숫자 var validKeyCodes = “,8,37,38,39,40,46,”; // ← , Del, Arrow Key var isOther = (validKeyCodes.indexOf(“,” + keyCode + “,”) > -1); // 숫자 입력이 아니거나, valideKeyCode 내의 것이 아니면 키 입력 취소 if(isStandard || isExtended || isOther) return true; else return false; }).bind(‘blur’, function(){ var $input = $(this); var value = $input.val(); // [^0-9] : 0~9 범위에 속하지 않는 문자, + : 1개 이상 일치, g : 모든 문자열에 대해 검사 var pattern = new RegExp(‘[^0-9]+”, “g”); value = value.replace(pattern, “”); // 정규식에 해당하는 문자는 없는 문자(“”)로 치환 $input.val(value); });
  13. 13. Ajax를 사용하여 폼을 전송하기• $.get(), $.post() method 이용 ‒ $.get(url [, data] [, success(data, textStatus, jqXHR)] [, dataType]); ‒ $.post(url [, data] [, success(data, textStatus, jqXHR)] [, dataType]); → url : 값을 전송할 url ( form 요소의 action 과 동일 ) → data : 서버로 전송할 값(데이터), query String 혹은 map → success : 서버요청이 성공했을 때 실행시킬 콜백함수 → dataType : 서버로부터 전송 받을 데이터 형식 (xml, json, script, text, html) var data = $(“#keyword”).val(); $.get(“/lib/searchZip.php”, data, function(data){ $(“#srchPostLayer”).hide(); $(“#zipcode”).val(data); }, text);
  14. 14. 폼 유효성 검사하기• 폼 요소들이 유효한지 검사하여 폼이 오류가 없는 경우에만submit 이벤트를 진행 $(“form”).submit(function(evnet){ var isErrorFree = true; // 폼요소들이 유효한지 검사하여 $(“input, select, textarea”).each(function(){ if(valuedateElement.isValid(this) == false) isErrorFree = false; }); // 유효성 결과에 따라 submit을 진행(true 반환) 혹은 취소(false 반환) 시킴 return isErrorFree; });
  15. 15. 폼 유효성 검사하기• 폼 요소들의 유효성 검사 var validateElement = { isValid : function(element){ var isValid = true; var $element = $(element); var id = $element.attr(“id”), name = $element.attr(“name”), value = $element.val(); var type = $element[0].type.toLowerCase(); switch(type){ case ’text’ : case ‘password’ : case ‘textarea’ : if(value.length == 0 || value.replace(/\s/g, ‘’).length == 0) isValid = false; break; // text, password, textarea 에 value 값이 없으면 오류처리 } return isValid; } };
  16. 16. END

×