web-dev-qa-db-ja.com

CSSまたはJavaScriptの読み取り専用div

CSSまたはJavaScriptまたはJqueryを使用して、「読み取り専用div」にする必要があります。テキストボックスだけでなく、すべて。完全なdiv。そのdivには何でも含まれます（image、、other div、text-box、...）

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

何か案が？

javascriptjquerycsshtmlreadonly
25
KarSho

_pointer-events: none;_を使用して、特定の要素でのマウスDOMインタラクション（クリック、ホバーなど）を無効にすることができます。例：

_div {
    pointer-events: none;
}_
_<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>_

ただし、_pointer-events: none;_が存在していても、カーソルを要素（またはその子）にフォーカスさせることは可能です。つまり、カーソルフォーカスを_<input />_タグに移動すると、値を編集できるようになります。

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

_<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>_
49
novalagung

残念ながらCSSでこれを行うことはできません。HTML要素のreadonly属性の後にいることになります。 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');
});
6
Daniel Imms

恐れていますが、CSSで要素の動作を制御することはできません。

CSSはCascading Style Sheetsの略で、要素のスタイリング専用です。

ただし、JavaScriptを使用できます。

上記のテストされていないjQueryの例：

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

以下を試してください：

スクリプトパーツ：

<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
John Peter
$("div").prop("readonly", true);

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