>  기사  >  웹 프론트엔드  >  jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법

jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법

青灯夜游
青灯夜游원래의
2022-06-15 10:37:192518검색

읽기 전용을 설정하는 두 가지 방법: 1. attr()을 사용하여 텍스트 텍스트 상자에 읽기 전용 속성을 추가하고 속성 값을 "readonly"로 설정합니다. 구문은 "$("textarea").attr( "읽기 전용", "읽기 전용");". 2. prop()을 사용하여 텍스트 텍스트 상자에 읽기 전용 속성을 추가하고 "$("textarea").prop("readonly",true);" 구문을 사용하여 속성 값을 "true"로 설정합니다.

jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.0 버전, Dell G3 컴퓨터.

HTML에서 요소의 읽기 전용 상태는 읽기 전용 속성(readonly)에 의해 제어됩니다.

텍스트 텍스트 상자(textarea)의 읽기 전용 상태를 설정하려면 textarea 요소에 읽기 전용 속성만 추가하면 됩니다.

jquery에는 요소에 속성을 추가하는 다음 두 가지 방법이 있습니다.

  • attr() 사용

  • prop() 사용

방법 1. attr()을 사용하여 텍스트 텍스트 상자를 설정합니다. 읽기 전용 상태

attr()을 사용하여 텍스트 영역 요소에 읽기 전용 속성을 추가하고 속성 값을 "readonly"로 설정하세요.

구현 코드 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("textarea").attr("readonly","readonly");
				});
			});
		</script>
	</head>

	<body>
		<textarea>默认文本</textarea><br /><br />

		<button>给text文本框添加只读属性</button>
	</body>
</html>

jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법

설정 버튼을 클릭하면 텍스트 텍스트 상자의 커서가 사라지고 더 이상 텍스트 입력이 불가능한 것을 확인할 수 있습니다.

방법 2. prop()을 사용하여 텍스트 텍스트 상자의 읽기 전용 상태를 설정합니다

prop()을 사용하여 텍스트 영역 요소에 읽기 전용 속성을 추가하고 속성 값을 "true"로 설정합니다.

구현 코드:

<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("textarea").prop("readonly",true);
		});
	});
</script>

jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법

마찬가지로 설정 버튼을 클릭하면 텍스트 텍스트 상자의 커서가 사라지고 더 이상 텍스트 입력이 불가능합니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 개발

위 내용은 jquery에서 텍스트 텍스트 상자의 읽기 전용 상태를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.