입력과 같은 텍스트 상자를 읽기 전용 및 편집 불가능으로 만들기 위해 양식을 처리하는 방법

방법 1: onfocus=this.blur()

<input type="text" name="input1" value="中国" onfocus=this.blur()>

방법 2: 읽기 전용

<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true">

방법 3: 비활성화

<input type="text" name="input1" value="中国" disabled>

읽기 전용 및 비활성화 모두 사용자가 양식 필드의 내용을 변경할 수 없도록 합니다. 그러나 그들 사이에는 약간의 차이점이 있으며 다음과 같이 요약됩니다.
읽기 전용은 입력(텍스트/비밀번호)과 텍스트 영역에만 유효하고 비활성화는 모든 양식 요소에 유효하지만 양식 요소가 비활성화를 사용한 후에는 use 양식이 POST 또는 GET을 통해 제출되면 이 요소의 값은 전달되지 않지만 읽기 전용은 값을 전달합니다(읽기 전용은 값 변경을 허용하고 이를 반환할 수 있으며, 비활성화는 변경을 허용하지만 데이터를 반환하지 않음).
일반적인 상황은 다음과 같습니다.
고유 식별 코드는 사용자 양식에 미리 입력되어 있으며 사용자는 이를 변경할 수 없습니다. 단, 이때 제출 시 해당 값을 전달해야 합니다. , 해당 속성은 읽기 전용으로 설정되어야 합니다.
사용자가 공식적으로 양식을 제출하고 관리자의 정보 확인을 기다려야 하는 경우, 사용자는 양식의 데이터를 변경할 수 없으며 범위가 넓기 때문에 볼 수만 있는 경우가 많습니다. 비활성화된 요소이므로 현재는 비활성화를 사용해야 하지만 동시에 제출 버튼도 비활성화해야 한다는 점에 유의해야 합니다. 그렇지 않으면 사용자가 이 버튼을 누르는 동안 데이터베이스에 무결성 검사가 없는 경우 작업 페이지에서 데이터베이스의 값이 지워집니다. 이 경우 비활성화되지 않고 읽기 전용을 사용하는 경우 양식에 입력(텍스트/비밀번호) 및 텍스트 영역 요소만 있으면 여전히 가능합니다. 선택과 같은 다른 요소가 있으면 사용자가 값을 다시 쓰고 키를 누를 수 있습니다. Enter 키를 눌러 제출하세요. (Enter는 기본 제출 트리거 버튼입니다.)
사용자가 제출 버튼을 누른 후 제출 버튼을 비활성화하는 경우가 많습니다. 이렇게 하면 네트워크 상태가 좋지 않은 환경에서 사용자가 반복적으로 클릭하는 것을 방지할 수 있습니다. 제출 버튼을 누르면 데이터가 데이터베이스에 중복 저장됩니다.
disabled와 readonly라는 두 속성은 공통점이 있습니다. 예를 들어 둘 다 true로 설정하면 form 속성을 편집할 수 없는 경우가 종종 있습니다. 실제로는 js 코드를 작성할 때 그렇습니다. 확실한 차이점이 있습니다.
입력 항목 비활성화를 true로 설정하면 양식 입력 항목이 포커스를 얻을 수 없으며 모든 사용자 작업(마우스 클릭 및 키보드 입력 등)이 유효하지 않습니다. 입력 항목에 대해 가장 중요한 점은 양식을 제출할 때 이 양식 입력이 제출되지 않는다는 것입니다.
읽기 전용은 텍스트를 입력할 수 있는 텍스트 입력 상자와 같은 입력 항목에만 해당됩니다. true로 설정하면 사용자는 해당 텍스트를 편집할 수는 없지만 여전히 집중할 수 있으며 양식을 제출할 때 입력 항목이 사용됩니다. 양식 제출로.

일부 성능 문제:
display: none과 visible:hidden의 차이점은 visible:hidden이 요소의 공간을 유지한다는 것입니다.
repaint(repaint) ), repaint 변경이 발생하면 요소의 모양이 변경되며 레이아웃을 변경하지 않고 발생합니다. 예를 들어 윤곽선, 가시성 및 배경색을 변경해도 DOM 구조 렌더링에는 영향을 미치지 않습니다.
리플로우(렌더링), 리페인트와의 차이점은 돔 구조의 렌더링에 영향을 미치고 동시에 리페인트를 트리거하며 자체 및 모든 상위 요소(조상)를 변경한다는 것입니다. 이 오버헤드는 매우 큽니다. 비용이 많이 들고 성능이 저하됩니다. 감소는 불가피하며, 페이지 요소가 많을수록 그 효과는 더욱 뚜렷해집니다.
display:none은 리플로우를 생성합니다
visibility:hidden은 다시 그리기만 실행합니다

관련 기사:

js는 입력 텍스트 상자를 읽기 전용으로 설정합니다.

js를 통해 모든 양식 개체를 읽기 전용으로 설정

js를 사용하여 입력 상자의 읽기 전용 속성을 동적으로 제어

위 내용은 입력과 같은 텍스트 상자를 읽기 전용 및 편집 불가능으로 만들기 위해 양식을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!