div readonly en CSS ou JavaScript
j'ai besoin de faire de " lecture seule div' en utilisant CSS ou JavaScript ou Jquery. Pas seulement des textos et tout. div. Cette div contient n'importe quoi(image, ,autre div,text-box,...)
cela devrait être pris en charge par tous les navigateurs.
une idée?
5 réponses
Vous pouvez utiliser pointer-events: none; pour désactiver la souris DOM interaction (comme cliquer, pointer, etc). exemple:
div {
pointer-events: none;
}<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>Cependant nous pouvons encore faire le curseur pour se concentrer sur le input balise, même si pointer-events: none; appliqué là, et il fera l'utilisateur capable d'éditer la valeur. Essayez de cliquer sur input balise, puis appuyez sur onglet au clavier, alors le curseur se focalisera sur la balise elle-même, et on pourra l'éditer.
faire input balise non modifiable, mettre readonly attribut directement sur l'étiquette ou en utilisant jQuery. Ci-dessous est un exemple simple sur la façon de le faire en utilisant jQuery .prop().
$("input, textarea").prop("readonly", true);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>vous ne pouvez pas faire cela avec CSS malheureusement, vous êtes après le readonly attribut sur les éléments HTML. Vous pouvez assez facilement accomplir ce que vous voulez en utilisant JavaScript, voici un exemple avec jQuery.
HTML
<div class="readonly">
<input type="text" />
<div><input type="checkbox" /> Blah</div>
<textarea>abc</textarea>
</div>
JavaScript
$(document).ready(function() {
$('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});
j'ai bien peur que vous ne puissiez pas contrôler le comportement des éléments avec CSS.
CSS signifie feuilles de Style en cascade - il est seulement pour les éléments de style.
Mais vous pouvez utiliser JavaScript.
non testé
$('#myDiv').children().attr('readonly', true);
Essayez Avec Ce Qui Suit:
Partie De Script :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true);
});
</script>
HTML Part :
<div id="previewDiv">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>
je pense que cela peut vous aider à résoudre votre problème.
$("div").prop("readonly", true);
<div>
<input type="text" value="value" /> <br />
<textarea>value</textarea>
</div>