Maison > Article > interface Web > 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:192456parcourir
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);".
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>
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>
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!