Readonly div в CSS или JavaScript

Мне нужно сделать "только для чтения div" с помощью CSS или JavaScript или JQuery. Не только текстовое поле и все. Полный div. Этот div содержит что угодно (изображение, другой div, текстовое поле,...)

Это должно поддерживаться всеми браузерами.

Любая идея?

Ответы

Ответ 1

Вы можете использовать pointer-events: none;, чтобы отключить взаимодействие с DOM мыши (например, щелчок, наведение и т.д.). Пример:

div {
    pointer-events: none;
}

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

Ответ 2

Вы не можете сделать это с помощью CSS, к сожалению, вы после атрибута readonly на HTML-элементах. Вы можете легко выполнить то, что хотите, используя JavaScript, вот пример с 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');
});

Ответ 3

Я боюсь, вы не можете контролировать поведение элементов с помощью CSS.

CSS означает каскадные таблицы стилей - это только для элементов стиля.

Но вы можете использовать JavaScript.

Неподтвержденный jQuery пример выше:

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

Ответ 4

Просто попробуйте следующее:

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:

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

Я думаю, это поможет вам решить вашу проблему.