이 가이드에서는 CSS를 사용하여 입력 필드를 비활성화하는 방법을 이해합니다. 시작하겠습니다!
CSS를 사용하여 입력 필드를 비활성화하는 방법은 무엇입니까?
CSS에서 이벤트는 ' 포인터 이벤트 ' 재산. 따라서 먼저 pointer-events 속성에 대해 알아봅니다.
'포인터 이벤트' CSS 속성이란 무엇입니까?
' 포인터 이벤트 ' HTML 요소가 클릭 또는 탭 이벤트, 활성 또는 호버 상태, 커서 표시 여부와 같은 터치 이벤트에 응답하거나 동작하는 방식을 제어합니다.
통사론
포인터 이벤트의 구문은 다음과 같습니다.
포인터 이벤트 : 자동 | 없음 ;
위의 언급 속성은 ' 자동 ' 그리고 ' 없음 ':
- 자동: 기본 이벤트를 수행하는 데 사용됩니다.
- 없음: 이벤트를 비활성화하는 데 사용됩니다.
주어진 예를 향해 나아가십시오.
예 1: CSS를 사용하여 입력 필드 추가
이 예에서는 먼저 div를 만들고 여기에 제목 및 입력 필드를 추가합니다. 그런 다음 입력 유형을 ' 텍스트 '로 설정하고 값을 ' 당신의 이름을 입력 '.
HTML
< div >< 센터 >
< h1 > 입력 필드 비활성화 < / h1 >
< 입력 유형 = '텍스트' 값 = '당신의 이름을 입력' >
< / 센터 >
< / div >
그런 다음 CSS로 이동하고 배경색을 '로 설정하여 div의 스타일을 지정합니다. RGB(184, 146, 99) ' 및 높이 ' 150픽셀 '.
CSS
div {배경- 색깔 : RGB ( 184 , 146 , 99 ) ;
키 : 150픽셀;
}
위에서 설명한 코드의 출력은 다음과 같습니다. 여기에서 입력 필드가 현재 활성화되어 있고 사용자의 입력을 받아들이고 있음을 알 수 있습니다.
이제 '의 값을 사용하는 다음 부분으로 이동합니다. 포인터 이벤트 ' 속성 ' 없음 '.
예 2: CSS를 사용하여 입력 필드 비활성화
우리는 이제 ' 입력 ' HTML 파일에 추가된 요소에 접근하고 pointer-events 값을 ' 없음 ':
입력 {포인터 이벤트 : 없음 ;
}
위에서 언급한 속성을 구현하면 ' 포인터 이벤트 ' 와 함께 ' 없음 ' 값을 입력하면 입력 필드의 텍스트를 편집할 수 없으며 이는 입력 필드가 비활성화되었음을 나타냅니다.
그게 다야! CSS를 사용하여 입력 필드를 비활성화하는 방법을 설명했습니다.
결론
HTML에서 입력 필드를 비활성화하려면 ' 포인터 이벤트 ” CSS 속성을 사용합니다. 그렇게 하려면 입력 필드를 추가하고 포인터 이벤트 값을 ' 없음 '를 눌러 입력 필드를 비활성화합니다. 이 가이드에서는 CSS를 사용하여 입력 필드를 비활성화하는 방법을 설명하고 그 예를 제공합니다.