자바스크립트에서 입력을 편집할 수 없게 만드는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 입력을 편집할 수 없게 만드는 방법

WBOY

풀어 주다： 2022-04-11 11:41:23

원래의

6827명이 탐색했습니다.

방법: 1. 비활성화된 속성 설정을 사용합니다. 구문은 "element object.disabled = true"입니다. 2. setAttribute() 메서드와 readOnly 속성 설정을 사용합니다. 구문은 "element object.setAttribute("readOnly", 진실)".

자바스크립트에서 입력을 편집할 수 없게 만드는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서 입력을 편집할 수 없도록 설정하는 방법

입력을 편집할 수 없도록 설정하는 방법에는 두 가지가 있습니다.

1. 비활성화 속성을 사용하세요

비활성화 속성은 부울 속성입니다.

disabled 속성은 비활성화되어야 하는 요소를 지정합니다.

비활성화된 입력 요소는 사용할 수 없으며 클릭할 수도 없습니다.

2. readonly 속성과 setAttribute 메소드를 사용하세요.

readonly 속성은 입력 필드가 읽기 전용임을 지정합니다.

읽기 전용 필드는 수정할 수 없습니다. 그러나 사용자는 여전히 필드를 탭하여 해당 텍스트를 선택하거나 복사할 수 있습니다.

readonly 속성은 특정 조건(예: 확인란 선택)이 충족될 때까지 사용자가 값을 수정하는 것을 방지합니다. 그런 다음 JavaScript를 사용하여 읽기 전용 값을 제거하고 입력 필드를 편집 가능한 상태로 전환해야 합니다.

setAttribute() 메서드는 지정된 이름과 규칙을 사용하여 새 속성을 추가하거나 기존 속성을 지정된 값으로 설정하는 데 사용됩니다.

구문은 다음과 같습니다.

elementNode.setAttribute(name,value)

로그인 후 복사

예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<input id="txt" type="text" >
    <input id="btn1" type="button" value="利用disabled不可编辑">
<input id="txt1" type="text" >
    <input id="btn2" type="button" value="利用readOnly不可编辑">
 <script> 
        var btn1 = document.getElementById(&#39;btn1&#39;);
        btn1.onclick = function () {
            var txt = document.getElementById(&#39;txt&#39;);
            txt.disabled = true;
        }
        var btn1 = document.getElementById(&#39;btn2&#39;);
        btn1.onclick = function () {
            var txt = document.getElementById(&#39;txt1&#39;);
            txt.setAttribute("readOnly", true);
        }
    </script>
</body>
</html>

로그인 후 복사

출력 결과:

자바스크립트에서 입력을 편집할 수 없게 만드는 방법