라디오버튼 포커스 왜 안될까요
본문
전송하기 누르면 라디오버튼 첫번째 포커스로 안오는데 뭐가 잘못된건지요?
제이쿼리로 해도 동작을 안합니다.
<script src="../jquery-1.10.1.min.js"></script>
<script>
function send_go(){
frm.send_type[0].focus();
//$(':radio[name="send_type"]:eq(0)').focus();
return false;
}
</script>
<form name="frm" id="frm" action="" method="post" enctype="multipart/form-data">
<input type="radio" name="send_type" id="send_type1" value="1" ><label for="send_type1">하나</label>
<input type="radio" name="send_type" id="send_type2" value="2" ><label for="send_type1">둘</label>
</form>
<a href="javascript:send_go();">전송하기</a>
답변 7
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>라디오 버튼 포커스 테스트</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function send_go() {
console.log("send_go called");
// 첫 번째 라디오 버튼 체크 + 포커스
$('#send_type1').prop("checked", true).focus();
// 시각적으로 확인 가능하게 alert도 추가
alert("첫 번째 라디오 버튼에 체크 및 포커스 됨");
}
</script>
</head>
<body>
<form name="frm" id="frm" method="post" enctype="multipart/form-data">
<input type="radio" name="send_type" id="send_type1" value="1"> 하나
<input type="radio" name="send_type" id="send_type2" value="2"> 둘
</form>
<a href="javascript:;" onclick="send_go();" class="boxb1">전송하기</a>
</body>
</html>
$(':radio[name="send_type"]').eq(0).focus();
로 한번 해보세요.
제이쿼리도 연결되있는데 해당코드도 동작 안합니다..
form 에다가 서브밋 이벤트 넣어서 해보세요
다음 코드가 도움이 될지 모르겠습니다.
<style>
input[type="radio"]:focus {
outline: 0.1em dotted highlight;
outline-offset: initial;
}
</style>
질문자입니다.
최대한 간략하게 정리했습니다.
코드가 동작안하는 이유가 뭘까요?
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function send_go(){
$(':radio[name="send_type"]:eq(0)').focus();
}
</script>
<form name="frm" id="frm" method="post" enctype="multipart/form-data">
<input type="radio" name="send_type" id="send_type1" value="1" >하나
<input type="radio" name="send_type" id="send_type2" value="2" >둘
</form>
<a href="javascript:;" onClick="send_go();" class="boxb1">전송하기</a>
라디오 버튼에는 포커스 액션이 별도로 없습니다..
만약 해당 라디오버튼이 화면 밖이라면 별도의 표시는 없어도 해당 위치로 스크롤이 되긴 합니다.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function send_go(){
$('#send_type2').focus();
}
</script>
<a href="javascript:;" onClick="send_go();" class="boxb1">전송하기</a>
<div style="height:1500px;"></div>
<form name="frm" id="frm" method="post" enctype="multipart/form-data">
<input type="radio" name="send_type1" id="send_type1" value="1" >하나
<input type="radio" name="send_type2" id="send_type2" value="2" >둘
<input type="text" name="send_type3" id="send_type3" value="2" >둘
</form>
채크해보세요.
체크를 해야지 focus를 주어서 무엇을 하겠다는 것인가요?
focus가 아니라 체크를 하는 것이 원하는 처리 같은데요?
$('input[name="send_type"]:eq(1)').prop('checked',true);