一般的な DIV タスク (パート 2) — DIV のエディターとさまざまな DIY アプリケーションへの変換

HTML5 で contentEditable 属性が導入されて以来、div は textarea と同様に最もよく使用されるエディターとして使用できるようになりました。
1. div をエディターとして有効にする<br />div を編集状態にするのは非常に簡単です。次の手順を実行するだけです。

コードをコピー

コードは次のとおりです。

div.contentEditable を true に設定します。

これにより編集モードになります。もちろん、HTML で直接 contenteditable を設定することもできます。
一般に、視覚的な編集を実現するには、contentEditable と designMode の 2 つの方法を使用できます。 ContentEditable は最初に IE で実装され、その後主要なブラウザが徐々に contentEditable をサポートするようになり、HTML5 標準にも contentEditable が含まれるようになりました。 designMode ではドキュメント全体を編集可能な状態にすることしかできませんが、contentEditable では任意の HTML 要素を編集可能な状態にすることができます。その応用範囲は designMode よりも広く、contentEditable の使用は今後のトレンドです。
ContentEditable と draggable は互いに競合する場合があります。contentEditable=true の場合、draggable (存在する場合) は通常 false に設定する必要があります。そうしないと編集できません。
2. div コンテンツを編集するときは、Enter キーを押して変更を確定します。
この実装は非常にシンプルです。イベントコールバックでイベントのキー値を決定するだけです。

コードをコピー

コードは次のとおりです。

htmlElement.contentEditable を false に設定します。
イベントキーコードが13の場合
htmlElement.blur();
}

3. Shift+Enter が押されたかどうかを判断し、押された場合は行を折り返します。 <br />実装原理は上記と同じで、比較的簡単です。

コードをコピー

コードは次のとおりです。

if(event.shiftKey && event.keyCode==13) {
戻る;
}

これは Chrome で実装されています。処理は必要なく、直接返すだけです。 FireFox では、改行を行うために <br> を追加する必要があります。

コードをコピー

コードは次のとおりです。

if(event.shiftKey && event.keyCode==13) {
var テキスト = htmlElement.textContent;
htmlElement.innerHTML = テキスト + '
';
戻る;
}

4. div コンテンツを編集する場合、改行は禁止されます<br />制限を超えたコンテンツ編集の処理方法に関連する CSS プロパティをいくつか示します。

コードをコピー

コードは次のとおりです。

width: 80px; ----この行は div の幅を制限します。
text-overflow:clip; ---余分なテキストは折り返されたり省略されたりしません。（この行を省略記号に設定すると、オーバーフローが発生したときに省略記号（...）が表示されます）
white-space:nowrap; -----テキストを1行に表示するように強制します
overflow:hidden; ------------------オーバーフローテキストを非表示にする
word-wrap: break-word;------自動改行を設定する

通常、最初の 2 つを設定することで目的の効果が得られます。他の要件がある場合は、次の属性を追加できます。
5. 編集中にdivの周りのフォーカスフレームを削除する
CSS で outline:none; または outline:0; を設定するだけです。
6. Div が編集状態になった後にすべてのテキストを選択する<br />これは、選択オブジェクトのmodify(alter, direction, granularity) メソッドを使用して実現できます。このメソッドは、フォーカスの位置を変更したり、選択範囲のサイズを拡大または縮小したりするために使用されます。このメソッドを使用すると、すべて選択したりフォーカスを移動したりするなど、さまざまな操作を実装できます。パラメータの意味は次のとおりです。
変えること: 変化の仕方。「move」はフォーカスを移動するために使用され、「extend」は選択を変更するために使用されます。
方向: 移動の方向。オプションの値は forward | backword または left | right です。
粒度: 移動の単位またはサイズ。オプションの値: 「character」、「word」、「sentence」、「line」、「paragraph」、「lineboundary」、「sentenceboundary」、「paragraphboundary」、または「documentboundary」。
この機能は、Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1 以降のバージョンでのみサポートされています。公式ドキュメント: https://developer.mozilla.org/en/DOM/Selection/modify。
次の例では、div が編集状態になったときにすべてのテキストを選択します。

コードをコピー

コードは次のとおりです。

if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}

残念ながら、FireFox の実装では、「sentence」、「paragraph」、「lineboundary」、「sentenceboundary」、「paragraphboundary」、「documentboundary」パラメータはサポートされていません。考え方を変えて、line パラメータを使用して実装する必要があります。

コードをコピー

コードは次のとおりです。

7. divのスクロールバーを最後の位置まで自動的にスクロールするように設定する
ここでは、div のいくつかの便利なプロパティ (scrollTop、scrollLeft、scrollWidth、scrollHeight) が使用されています。次の実装例を見てみましょう。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="キーワード" content="スクロールバー、スクロールバー、ページの下部、チャットウィンドウ、" />
<meta name="description" content="場合によっては (チャットプログラムを開発するときなど)、スクロールバーを下部に保持する必要があります。たとえば、チャットウィンドウでは、最新の送受信メッセージが下部に表示される必要があります。下部のコンテンツを表示したい場合は、スクロールバーを下部に保持する必要があります。"/>
<title>スクロールバーを下部に維持する方法 - スクロールバー、ページの下部、チャットウィンドウ、</title>
</head>
<本文>
<div id="例">
<h3 id="example_title">スクロールバーを下部に維持する方法</h3>
<div id="example_main">

<script type="text/javascript">
関数 add()
{
var now = 新しい Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</スクリプト>
<span class="notice">最新の情報を挿入するには、「行を挿入」ボタンをクリックしてください。スクロールバーが表示されたら、自動的に一番下に留まります。 </span>

<div id="scrolldIV" style="overflow:auto; 高さ: 100px; 幅: 400px; 境界線: 1px solid #999;"></div>
<input type="button" value="行を挿入" onclick="add();">

</div>
</div>
</本文>
</html>

一番下までスクロールするには、div.scrollTop = div.scrollHeight; を設定するだけです。 scrollHeight は、内部要素の非表示部分を含む内部要素の絶対幅です。 scrollLeft についても同様です。右端までスクロールする場合は、div.scrollLeft = div.scrollWidth; と設定するだけです。
さらに、div の offsetHeight、offsetLeft などの関連する測定プロパティを組み合わせることで、スクロールバーの位置を簡単に制御できます。
8. div 入力ボックスの高さ調整<br />高さ調整とは、入力行数が増えるにつれて入力ボックスがどんどん高くなり、一定の高さに達すると垂直スクロールバーが表示されることを意味します。
複数行のテキストフィールドとして、textarea はほとんどのニーズを満たします。ただし、textarea の欠点の 1 つは、通常の div タグのようにコンテンツに適応できないことです。テキストエリアの高さは常に固定されています。インタラクティブなエクスペリエンスを向上させるためにテキストフィールドを高度に適応させたい場合、問題が発生することがあります。もちろん、JS を使用して高さを制御し、適応性を実現することもできます。実際、ここで div を使用してこの効果をシミュレートできます。以下はネットユーザーによる実装です:
HTMLコード:

コードをコピー

コードは次のとおりです。

対応する CSS コード:

コードをコピー

コードは次のとおりです。

.テストボックス{
幅: 400ピクセル;
最小高さ: 120px;
最大高さ: 300px;
左マージン: 自動;
右マージン: 自動;
パディング: 3px;
アウトライン: 0;
境界線: 1px 実線 #a0b3d6;
フォントサイズ: 12px;
単語折り返し: 単語を区切る;
オーバーフロー-x:非表示;
オーバーフロー-y: 自動;
}

実際、多くの実装はインターネットから来ています。ここですべてのネットユーザーに心から感謝の意を表したいと思います。ここで挙げた問題の多くを解決する方法は他にもたくさんあります。私たちは、皆さんが前向きに考え、関連する知識を自分のものにすることを奨励しています。

<<: Firefox または IE でスパン幅が決定されない場合の解決策

>>: JavaScript プロトタイプチェーンを理解するための 2 つの図