테스트 사이트 - 개발 중인 베타 버전입니다

라디오버튼 포커스 왜 안될까요 채택완료

수난이대 2개월 전 조회 502

전송하기 누르면 라디오버튼 첫번째 포커스로 안오는데 뭐가 잘못된건지요?

제이쿼리로 해도 동작을 안합니다.

</p>

<p><script src="../jquery-1.10.1.min.js"></script>

<script>

function send_go(){</p>

<p>    frm.send_type[0].focus();

    //$(':radio[name="send_type"]:eq(0)').focus(); 

    return false;</p>

<p>}

</script></p>

<p><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></p>

<p>

<a href="javascript:send_go();">전송하기</a></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 7개

채택된 답변
+20 포인트
2개월 전

<!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>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

체크를 해야지 focus를 주어서 무엇을 하겠다는 것인가요?

focus가 아니라 체크를 하는 것이 원하는 처리 같은데요?

 

 $('input[name="send_type"]:eq(1)').prop('checked',true);

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

라디오 버튼에는 포커스 액션이 별도로 없습니다..

만약 해당 라디오버튼이 화면 밖이라면 별도의 표시는 없어도 해당 위치로 스크롤이 되긴 합니다.

 

</p>

<p><script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a>

<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></p>

<p>

 

채크해보세요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

질문자입니다.

최대한 간략하게 정리했습니다.

코드가 동작안하는 이유가 뭘까요?

 

</p>

<p><script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a>

<script>

function send_go(){

    $(':radio[name="send_type"]:eq(0)').focus(); 

}

</script></p>

<p>

<form name="frm" id="frm"  method="post" enctype="multipart/form-data"></p>

<p><input type="radio"  name="send_type"  id="send_type1"  value="1" >하나

  

<input type="radio"  name="send_type"  id="send_type2"  value="2" >둘</p>

<p></form></p>

<p><a href="javascript:;" onClick="send_go();" class="boxb1">전송하기</a></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

다음 코드가 도움이 될지 모르겠습니다.

 

</p>

<p><style>

input[type="radio"]:focus {

    outline: 0.1em dotted highlight;

    outline-offset: initial;

}

</style></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

form 에다가 서브밋 이벤트 넣어서 해보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

2개월 전

$(':radio[name="send_type"]').eq(0).focus();

로 한번 해보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

수난이대
2개월 전
제이쿼리도 연결되있는데 해당코드도 동작 안합니다..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인