> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 입력 설정은 편집할 수 없습니다.

jquery 입력 설정은 편집할 수 없습니다.

WBOY
풀어 주다: 2023-05-14 10:26:07
원래의
3050명이 탐색했습니다.

jQuery는 개발자가 코드를 빠르게 작성하여 다양한 기능을 구현하는 데 도움이 되는 인기 있는 JavaScript 프레임워크입니다. 일반적인 요구 사항 중 하나는 입력을 편집할 수 없는 상태로 설정하는 것입니다. 이 기사에서는 jQuery를 사용하여 이 기능을 구현하는 방법을 소개합니다.

1. 요소 속성을 통해 입력을 편집할 수 없도록 설정

가장 간단한 방법 중 하나는 입력 요소의 "disabled" 속성을 사용하여 편집할 수 없는 상태로 설정하는 것입니다. HTML에서는 이 기능을 달성하기 위해 입력 태그에 "disabled" 속성을 추가할 수 있습니다. 예:

jQuery에서는 attr() 함수를 사용하여 입력 요소의 속성을 조작할 수 있습니다. 입력 요소를 비활성화하려면 "disabled" 속성을 true로 설정하기만 하면 됩니다. 예:

$('input[name="username"]').attr('disabled', true);

이 코드는 "name" 속성이 "username"이고 " 비활성화된 입력 요소를 선택합니다. " 속성을 true로 설정하면 입력 상자가 비활성화됩니다.

입력 상자를 활성화하려면 "disabled" 속성을 false로 설정하세요. 예:

$('input[name="username"]').attr('disabled', false);

두 번째, prop() 함수를 사용하여 입력을 편집할 수 없도록 설정합니다

또 다른 일반적인 방법 입력 요소의 "readonly" 속성을 사용합니다. "disabled" 속성과 달리 "readonly" 속성은 입력 상자의 텍스트 내용을 유지하지만 사용자가 편집할 수는 없습니다. HTML에서는 이 기능을 달성하기 위해 입력 태그에 "readonly" 속성을 추가할 수 있습니다. 예:

jQuery에서는 prop() 함수를 사용하여 요소의 속성을 조작할 수 있습니다. 입력 요소를 읽기 전용 모드로 설정하려면 다음 코드를 사용할 수 있습니다:

$('input[name="username"]').prop('readonly', true);

이 코드 "username" 속성이 있는 "name" 요소를 선택하고 "readonly" 속성을 true로 설정하여 읽기 전용 모드로 설정합니다.

읽기 전용 모드를 비활성화하려면 "readonly" 속성을 false로 설정하세요. 예:

$('input[name="username"]').prop('readonly', false);

셋째, CSS 스타일을 사용하여 입력을 편집 불가능으로 설정합니다

마지막 방법은 다음과 같습니다. CSS 스타일을 사용하여 입력 상자를 편집 불가능한 상태로 설정합니다. CSS 설정을 통해 입력 요소에 다음 스타일을 추가할 수 있습니다:

input[readonly] {
background-color: #eee;
커서: not-allowed;
}

이러한 스타일은 입력 상자의 배경을 만듭니다. 회색이고 커서는 비활성화 플래그가 되어 입력 상자를 편집할 수 없음을 사용자에게 알립니다.

입력 상자를 활성화하려면 입력 상자에서 "읽기 전용" 속성을 제거하세요. 예:

두 방법 모두 jQuery를 사용하여 입력을 편집 불가능한 상태로 쉽게 설정할 수 있습니다. 특정 요구 사항에 따라 사용할 방법을 선택할 수 있습니다. 어쨌든 이러한 기능과 속성은 이해하고 사용하기 쉬우며, 초보자라도 자신의 요구에 맞는 적절한 방법을 쉽게 찾을 수 있습니다.

위 내용은 jquery 입력 설정은 편집할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿