javascript - readonly css textbox

readonly div en CSS o JavaScript

Question

Necesito hacer '' div de solo lectura'' con CSS o JavaScript o Jquery. No solo cuadro de texto y todo. div completa Ese div contiene cualquier cosa (imagen, otro div, cuadro de texto, ...)

Eso debería ser soportado por todos los navegadores.

¿Alguna idea?

Answer 1

Lamentablemente, no puede hacer esto con CSS, está buscando el atributo de readonly en elementos HTML. Puede realizar fácilmente lo que quiera usando JavaScript, aquí hay un ejemplo con jQuery.

jsFiddle

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'');
});

Answer 2

Me temo que no puedes controlar el comportamiento de los elementos con CSS.

CSS significa hojas de estilo en cascada, solo para elementos de estilo.

Pero puedes usar JavaScript .

Ejemplo de jQuery probado antes:

$(''#myDiv'').children().attr(''readonly'', true);

Answer 3

Podrías usar pointer-events: none; para deshabilitar la interacción DOM del ratón (como hacer clic, desplazar, etc.) en cierto elemento. Ejemplo:

div {
    pointer-events: none;
}

<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>

Sin embargo, aunque los pointer-events: none; está ahí, aún es posible hacer que el cursor esté enfocado en el elemento (o en sus hijos). Esto significa que si movemos el cursor en la etiqueta <input /> , entonces es posible editar el valor.

Ejemplo: intente hacer clic en la etiqueta <input /> , luego presione la tecla tab en el teclado, el enfoque del cursor estará en la entrada, haciéndolo editable.

Para hacer que la etiqueta <input /> completamente no editable , ponga el atributo de readonly en la etiqueta. A continuación se muestra un ejemplo simple para hacerlo utilizando jQuery .prop() . También puede poner el atributo directamente en la etiqueta, dependiendo de las necesidades.

$("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>

Answer 4

Solo intente con lo siguiente:

Parte del guión:

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

Parte HTML:

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

Creo que esto puede ayudarte a resolver tu problema.

Answer 5

$("div").prop("readonly", true);

<div> 
    <input type="text" value="value" /> <br />
    <textarea>value</textarea>
</div>