только для чтения div в CSS или JavaScript

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

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

есть идеи?

22
css html javascript jquery readonly

5 ответов

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

div {
    pointer-events: none;
}
<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>
мы все еще можем сделать курсор, чтобы сосредоточиться на input тег, хотя pointer-events: none; применяется там, и это позволит пользователю редактировать значение. Попробуйте нажать input tag, затем нажмите tab в клавиатуре, тогда фокус курсора будет на самом теге, и мы можем редактировать его.

сделать input тег un-editable, put readonly атрибут непосредственно на теге или с помощью jQuery. Ниже приведен простой пример, как это сделать с помощью 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>
41

вы не можете сделать это с 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');
});
5

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

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

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

непроверенные jQuery пример выше:

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

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

Сценарий Часть :

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

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

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

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