CSS에서 입력 상자를 편집할 수 없도록 설정하는 방법

CSS에서 입력 상자를 편집할 수 없도록 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 입력 태그를 정의한 다음 CSS 스타일 "pointer-events: none;"을 추가합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

css는 입력을 편집할 수 없도록 만듭니다

입력에 CSS 스타일 포인터 이벤트 추가: 없음; 요소가 마우스 이벤트의 대상이 되는 것을 방지하기 위해 포인터 이벤트를 사용한다고 해서 반드시 이벤트 리스너가 요소는 절대 트리거되지 않습니다. 하위 요소가 포인터 이벤트 속성을 명시적으로 지정하고 해당 요소가 마우스 이벤트의 대상이 되도록 허용하는 경우 해당 요소를 가리키는 모든 이벤트는 이벤트 전파 중에 상위 요소를 통해 전파되고 해당 요소에 대한 이벤트 리스너를 적절한 방식으로 트리거합니다. . 물론, 상위 요소에는 있지만 하위 요소에는 없는 화면에서의 마우스 활동은 상위 요소 및 하위 요소에 의해 캡처되지 않습니다(상위 요소를 통과하여 그 아래에 있는 요소를 가리킴).

HTML에서 입력을 편집할 수 없게 만듭니다

1. 입력 태그에 비활성화된 속성을 추가합니다.

비활성화된 속성은 비활성화된 입력 요소를 비활성화해야 함을 규정하며, 비활성화된 입력 요소는 편집, 복사, 선택할 수 없으며 포커스를 받을 수 없습니다. 배경은 전달된 값을 받을 수 없습니다. 설정 후에는 텍스트 색상이 회색으로 변합니다. 비활성화된 속성은 과 함께 사용할 수 없습니다.

예:

input{
    pointer-events: none;
}

2. 입력 태그에 readonly 속성을 추가합니다.

readonly 속성은 입력 필드가 읽기 전용이고 복사 가능함을 규정합니다. 그러나 사용자는 Tab 키를 사용하여 필드로 전환할 수 있습니다. 포커스를 받고 선택하거나 텍스트를 복사하세요. 전달된 값은 백그라운드에서 수신됩니다. 읽기 전용 속성은 사용자가 값을 수정하는 것을 방지합니다.

readonly 속성은 또는 와 함께 사용할 수 있습니다.

예:

<input type="text" disabled="disabled" />

추천: "

"

위 내용은 CSS에서 입력 상자를 편집할 수 없도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!