javascript - CSS または JavaScript の readonly div

Question

CSS、JavaScript、または Jquery を使用して「読み取り専用div 」を作成する必要があります。テキストボックスだけでなく、すべて。フルdiv。そのdivには何でも含まれています（画像、、他のdiv、テキストボックス、...）

これは、すべてのブラウザでサポートされているはずです。

何か案が？

Answer 1

pointer-events: none;特定の要素でのマウス DOM インタラクション (クリック、ホバーなど) を無効にするために使用できます。例：

div {
    pointer-events: none;
}

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

ただし、pointer-events: none;そこにある場合でも、カーソルを要素 (またはその子) にフォーカスさせることは可能です。つまり、カーソルのフォーカスを<input />タグに移動すると、値を編集できます。

例: タグをクリックしてからキーボードのタブ<input />を押すと、カーソルのフォーカスが入力に置かれ、編集可能になります。

---

<input />タグを完全に編集不可readonlyにするには、タグに属性を付けます。以下は、 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>

Answer 2

残念ながら、CSS でこれを行うことはできませんreadonly。HTML 要素の属性を求めています。JavaScript を使用すると、必要なことを非常に簡単に実現できます。jQuery を使用した例を次に示します。

jsフィドル

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 3

次のことを試してみてください：

スクリプトパート：

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

これはあなたの問題を解決するのに役立つかもしれないと思います。