contenteditable="true"
指定した要素のコンテンツを編集可能にします。HTML5の全ての要素に指定可能
div 要素
下の画像もドラッグして、移動したり、コピペ, 消去することができます。
li 要素
- contenteditable 属性
dd 要素
- 開会日時
- 皇紀 2680年 7月24日20時〜23時
- メイン会場
- 東京都新宿区 新国立競技場
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
コロリポプラン 詳細はこちら
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>contenteditable属性</title>
<style type="text/css">
<!--
:hover[contenteditable="true"]{
color:#cc0033;
}
.editbox{
margin:5px;
padding:5px;padding-left:10px;
border:1px gray solid;
border-left: 4px solid gray;
background:#f5f5f5;
min-height:1em;
}
.editbox p{
margin:0;
}
.editUL li{
list-style-type:none;
}
-->
</style>
</head>
<body>
<p>div 要素</p>
<div class="editbox" contenteditable="true">
<div>このdiv要素のテキストは編集可能になっています。contenteditable="true"<br />
下の画像もドラッグして、移動したり、コピペ,消去することができます。
<br />
<img src="image/hana.gif" alt="">
<img src="/image/wanwan.gif" alt="">
<img src="/image/raketto.gif" alt="">
</div>
</div>
<p>li 要素</p>
<ul class="editUL">
<li><div class="editbox" contenteditable="true">contenteditable 属性</div></li>
<li><div class="editbox" contenteditable="true"> </div></li>
</ul>
<p>dd 要素</p>
<dl>
<dt>開会日時</dt>
<dd class="editbox"><div contenteditable="true">皇紀 2680年 7月24日20時〜23時</div></dd>
<dt>メイン会場</dt>
<dd class="editbox"><div contenteditable="true">東京都新宿区 新国立競技場</div></dd>
</dl>
<p><button onclick="history.go(0)">元に戻す</button></p>
</body>
</html>
contenteditable="値"
- true
- 該当要素を編集可能にします。
- false
- 該当要素を編集不可能にします。
- inset
- 祖先要素の属性値を継承します。
javascript 構文
element.contentEditable=true;
<button onclick="cngEdit.contentEditable=true" >編集可能にする "true"</button>
<button onclick="cngEdit.contentEditable=false" >編集不可能にする "false"</button>
<button onclick="alert(cngEdit.innerHTML);" >編集したHTMLソース表示</button>
<div id="cngEdit" contenteditable="true">
<div>当該要素のID名を指定して<br />
編集モードを切り替えます。</div>
</div>編集モードを切り替えます。
contenteditable //ブラウザによる挙動の違い
<div id="cngEdit" contenteditable="true">
この領域は編集できます。</div>
IEでは<p>タグが生成され上下に余白が入ります。</p>
これを回避し '一行改行' を実行するには 下の様に、コードを書き換えます。
実行すると <p>タグではなく、<div>タグが入ります。そして念のために、CSS で
P要素の '
margin' を'0' にします。#cngEdit p{ margin:0;}
<div id="cngEdit" contenteditable="true">
<div>この領域は編集できます。</div> <!-- DIVを入れ子にする-->
</div>
上記 編集お試しボックスで、編集、コピーして貼り付け、 「Enter」キー を押す などして、’編集したHTMLソース表示’ ボタンを押してください。思わぬ結果が..............
ブラウザを変えて、試してください。
- ★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- DIV要素 HTML
- SPAN要素
- 箇条書き,リスト
- 入力チェック 数字かどうか。JavaScript
- white-space プロパティ空白文字や改行、自動改行の扱い
