JavaScript 要素内の文字を編集可能にする
要素内の文字や画像を編集するには、要素の「contentEditable」プロパティに「true」を指定します。「true」を指定すると、その要素内にある文字や画像は編集可能になり、文字の追加や削除が可能になります。また、子要素や子孫要素も、親要素と同様に編集可能になります。また、スクリプトでcontentEditableプロパティを操作する方法以外に、要素にcontenteditable属性を指定しても編集が可能になります。
<body>
<script>
window.addEventListener("load", function(){
//編集可能領域
var edit = document.getElementById("editArea");
//編集可能ボタンにイベントを設定
document.getElementById("startEdit").addEventListener("click",function(){
edit.contentEditable = true;
},false);
//編集禁止ボタンにイベントを設定
document.getElementById("endEdit").addEventListener("click",function(){
edit.contentEditable = false;
},false);
}, false);
</script>
<div id="editArea">祇園精舎の金の声<br>諸行無常</b>の響きあり<br>沙羅双樹の花の色<br>盛物必衰の理をあらわす</div>
<form>
<input type="button" value="編集可能にする" id="startEdit">
<input type="button" value="編集を禁止にする" id="endEdit">
</form>
</body>編集可能にするボタンをクリックすると、指定した要素の文字が編集可能になります。
文字を追加・削除した後に編集を禁止するボタンをクリックすると、編集ができなくなります。
