HTML5 で contentEditable を使用して複数行の高さを自動的に増やす text_html5 チュートリアルのヒント

contentEditable は、Microsoft によって開発され、逆コンパイルされて他のブラウザで使用されるグローバル プロパティです。この属性の主な機能は、ユーザーが要素内のコンテンツを編集できるようにすることです。そのため、要素はマウス フォーカスを取得できる要素である必要があり、マウスをクリックした後にユーザーにキャレットを提供して、ユーザーに次のことを促す必要があります。要素内のコンテンツは編集できます。 contentEditable プロパティは、true または false として指定できるブール値のプロパティです。

さらに、この属性には非表示の継承状態もあります。属性が true の場合、要素は編集を許可するように指定され、true または false が指定されると、要素は編集を許可しないように指定されます。 false の場合、要素の親要素が編集可能な場合、要素は編集可能になります。

さらに、contentEditable 属性に加えて、要素には isContentEditable 属性もあります。要素が編集可能な場合、この属性は true、要素が編集できない場合、この属性は false になります。
以下は contentEditable 属性の使用例です。contentEditable 属性がリスト要素に追加されると、読者はこの例をブラウザーで試すことができます。

XML/HTML コードコンテンツをクリップボードにコピー

1. >
2. <頭>
3. <メタ charset="UTF- 8">
4. <title>conentEditalbe 属性の例 タイトル>
5. 頭>
6. <h2>編集可能なリスト h2>
7. <ul contentEditable="true" >
8. <li>リスト要素 1 リ>
9. <li>リスト要素 2 リ>
10. <li>リスト要素 3 リ>
11. ul>

このコードを実行した後の結果は以下のようになります:

行テキ​​ストの高さが自動的に増加します

複数行のテキスト ボックスに関して言えば、テキストエリアを使用することは非常に便利ですが、欠点が 1 つあります。文字数を指定することしかできません。対応する列と行を変更するか、CSS を直接使用して高さの幅を増やします。

Weibo への投稿に似た入力ボックスなど、特定の時点では依然として自動高さ調整が必要ですが、これは一般的な要件です。テキスト ボックスにはデフォルトの高さがあり、入力テキストがこの高さを超えると、自動的に高さが高くなります。最大制限がある必要があります。この制限を超えると、垂直スクロール バーが表示されます。

テキストエリアを使用してこの要件を満たしている場合は、テキストボックスの高さを動的に変更するために、js と連携してテキストの高さの変更を監視する必要もあります。これは、特にモバイル側では非常に不便であり、非科学的です。このとき、contenteditable 属性を使用できます。

例:

XML/HTML コードコンテンツをクリップボードにコピー

1. <div contenteditable="true" クラス="ボックス" id=「ボックス」 >
3. div>
4. <スタイル>
.box{幅:200px;最大高さ:100px;ボーダー:1px 実線 #ccc;overflow-y:auto;overflow-x:hidden;}
6. スタイル>

contenteditable 属性の値が true に指定されている限り、div は編集可能になり、コンテンツが増加するにつれて高さも自動的に増加します。次に、上記の要件を達成するために div に最大の高さを与えます。