하코사 jQuery 스터디 Ch.10

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

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

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. 폼 요소들을 활성/비활성화하기
$(“#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. 폼 요소들을 활성/비활성화하기
$(“#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. 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. 전용 링크를 사용하여 모든 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. 단일 토글을 사용하여 모든 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. 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. 문자의 개수에 의한 자동 탭 기능 구현하기
$(“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. 남아있는 글자의 개수를 표시하기
• 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. 텍스트 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. 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. 폼 유효성 검사하기
• 폼 요소들이 유효한지 검사하여 폼이 오류가 없는 경우에만
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. 폼 유효성 검사하기
• 폼 요소들의 유효성 검사
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. END