부트 스트랩 레이아웃을 사용하여 로그인 이름 입력 상자의 원 클릭 명수 아이콘 및 아래 그림과 같이 비밀번호 입력 상자에 암호를 표시하는 작은 눈 아이콘과 같은 입력 입력 상자에 한 번의 클릭 명수 아이콘을 추가하십시오.
그러나 아이콘을 입력 입력 상자에 넣을 때이 작은 아이콘은 클릭 이벤트를 얻을 수 없습니다.
문제는 이 작은 아이콘이 어떻게 클릭 이벤트를 얻을 수 있습니까?
모르겠지만, 이 기능을 간접적으로 구현하기 위해 원형 교차로를 사용할 수 있습니다.
*** 핵심 요점은 다음과 같습니다.
솔루션 : 작은 아이콘 위치에 보이지 않는 요소를 추가하고 요소의 크기는 작은 아이콘을 덮지 만 배경색과 테두리는 없습니다. 투명 퀼트로 작은 아이콘을 덮는 것과 같습니다.
다음과 같이 코드를 복사하십시오. <div>
<span> <i> </i> </span>
<입력 유형 = "텍스트"자리 표시 자 = "계정/휴대 전화 번호/이메일"id = "username">
<span style = "display : inline-block;"> </span> <-작은 아이콘 요소->
<span style = "display : inline-block; 테두리 : 1px 단단한 빨간색; 너비 : 30px;
</div>
작은 아이콘에 오버레이 된이 요소에 이벤트를 추가하십시오. 작은 아이콘의 기능은 필요에 따라 표시하고 숨기는 것입니다.
이것은 간접적으로 실현됩니다. 작은 아이콘의 클릭 효과가 훌륭한 솔루션입니까? 독서에 감사드립니다. 문제를 원활하게 해결하는 데 도움이되기를 바랍니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼