[JavaScript] 등록 페이지 필터 - 사진 첨부 안 했을 때, div에 focus 주는 방법

	$("#insertBtn").on("click", function() {
		if($.trim($("#recipeTit").val()) == "") {
			$("#sNotice").show();
			$("#recipeTit").focus();
		} else if($("#material").children().children("input").val() == "") {
			$("#mNotice").show();
			$("#material").children().children("input").first().focus();
		} else if($(".main_img_wrap").children("img").length == "") {
			$("#miNotice").show();
			$(".main_img").attr("tabindex", -1).focus();
		} else if($(".detail_img_wrap").children("img").length == "") { 
			$("#diNotice").show();
			$(".detail_img").first().attr("tabindex", -1).focus();
		} else if($("#con").val() == "") {
			$("#cNotice").show();
			$("#con").focus();
		} else{
			var form = $("#actionForm");
			form.ajaxForm({

 

1. 사진 첨부를 했는지 안 했는지 아는 방법

= 이미지의 개수 따지기

이미지 개수가 없으면 첨부 안 한 것이다.

이미지의 개수 : $("img").length

else if($(".detail_img_wrap").children("img").length == "") { 
	$("#diNotice").show(); //경고 메시지
	$(".detail_img").first().attr("tabindex", -1).focus(); //포커스
}

 

 

2. div 태그에도 focus를 주고 싶을 때

focus는 대표적으로 input, select, button, a 태그에만 걸 수 있다. 

div에 focus를 주고 싶을 때는 tabindex를 이용한다.

관련 글 -> https://60cod.tistory.com/287

 

방법1) 

게시글 등록 버튼을 눌렀을 때 해당 요소의 tabindex를 -1로 만들고 포커스 한다.

$(".main_img").attr("tabindex", -1).focus();

 

방법2)

해당 요소의 tabindex를 0으로 정해주고

게시글 등록 버튼을 눌렀을 때 해당 요소를 포커스 한다.

<div class="main_img" tabindex="0">
	<div class="add_m_img"></div>
</div>

$(".main_img").focus();