Maison >interface Web >Questions et réponses frontales >Comment définir le statut en lecture seule pour la zone de texte dans jquery

Comment définir le statut en lecture seule pour la zone de texte dans jquery

青灯夜游
青灯夜游original
2022-06-15 10:37:192562parcourir

Deux façons de définir la lecture seule : 1. Utilisez attr() pour ajouter l'attribut en lecture seule à la zone de texte et définissez la valeur de l'attribut sur "lecture seule", la syntaxe est "$("textarea").attr( "lecture seule", "lecture seule");". 2. Utilisez prop() pour ajouter l'attribut en lecture seule à la zone de texte et définissez la valeur de l'attribut sur "true", en utilisant la syntaxe "$("textarea").prop("readonly",true);".

Comment définir le statut en lecture seule pour la zone de texte dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

En HTML, le statut en lecture seule d'un élément est contrôlé par l'attribut lecture seule (readonly).

Si vous souhaitez définir le statut en lecture seule de la zone de texte (textarea), il vous suffit d'ajouter l'attribut readonly à l'élément textarea.

jquery propose les deux méthodes suivantes pour ajouter des attributs aux éléments :

  • Utilisez attr()

  • Utilisez prop()

Méthode 1. Utilisez attr() pour définir la zone de texte Statut en lecture seule

Utilisez simplement attr() pour ajouter l'attribut en lecture seule à l'élément textarea et définissez la valeur de l'attribut sur "lecture seule".

Code d'implémentation :

<!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>

Comment définir le statut en lecture seule pour la zone de texte dans jquery

Vous pouvez voir qu'après avoir cliqué sur le bouton des paramètres, le curseur de la zone de texte disparaît et la saisie de texte n'est plus possible.

Méthode 2. Utilisez prop() pour définir le statut en lecture seule de la zone de texte

Utilisez simplement prop() pour ajouter l'attribut readonly à l'élément textarea et définissez la valeur de l'attribut sur "true".

Code d'implémentation :

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

Comment définir le statut en lecture seule pour la zone de texte dans jquery

De même, après avoir cliqué sur le bouton des paramètres, le curseur de la zone de texte disparaît et la saisie de texte n'est plus possible.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Développement web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn