HACOSA jQuery STUDY#10. HTML 폼의 기능 강화하기 ( 직접개발 )

페이지 로드 시에 input 요소에 포커스 주기• $(selector).focus method 사용

$(‘#username’).focus();

폼 요소들을 활성 / 비활성화하기• .attr(), .removeAttr() method 사용

// Markup 은 p.314 참고

$(“#sameAsShipping”).change(function(){ if(this.checked){ $(“#billingInfo input:text”).attr(“disabled”, “disabled”); }else{ $(“#billingInfo input:text”).removeAttr(“disabled”); }});

폼 요소들을 활성 / 비활성화하기

$(“#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");

폼 요소들을 활성 / 비활성화하기

$(“#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); }});

RadioButton 요소를 자동으로 선택하기

‒ Other 가 선택되면 자동으로 텍스트박스에 포커스 가도록 하기

$(“#chooseSource input:text”).blur(function(){ if($(this).val() != “”){ $(this).siblings(“input:radio”).attr(“checked”, true); }});

$(“#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(); } });});

전용 링크를 사용하여 모든 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”);});

단일 토글을 사용하여 모든 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”); } });});

Select 요소에 옵션 추가 및 제거하기• .appendTo() method 사용‒ <option> 추가

‒ <option> 제거

$(“#add”).click(function(event){ event.preventDefault(); var optionName = $(“newColorName”).val(); var optionValue = $(“newColorValue”).val(); $(“<option/>”.attr(“value”,optionValue).text(optionName).appendTo(“#colors”);});

$(“#remove”).click(function(event){ event.preventDefault(); var $select = $(“#colors”); $(“option:selected”, $select).remove();});

문자의 개수에 의한 자동 탭 기능 구현하기

$(“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(); }});

남아있는 글자의 개수를 표시하기• 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();});

텍스트 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, Ar-row 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);});

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);

폼 유효성 검사하기• 폼 요소들이 유효한지 검사하여 폼이 오류가 없는 경우에만 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;});

폼 유효성 검사하기• 폼 요소들의 유효성 검사

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; }};

END