ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 で contentEditable を使用して複数行の高さを自動的に増やす text_html5 チュートリアルのヒント

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

WBOY
WBOYオリジナル
2016-05-16 15:45:511481ブラウズ

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>

このコードを実行した後の結果は以下のようになります:
201631113549687.jpg (469×213)

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

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

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

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

例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <div contenteditable="true" クラス="ボックス" id=「ボックス」 >
  2. div>
  3. <スタイル>
  4. .box{幅:200px;最大高さ:100px;ボーダー:1px 実線 #ccc;overflow-y:auto;overflow-x:hidden;}
  5. スタイル>
contenteditable 属性の値が true に指定されている限り、div は編集可能になり、コンテンツが増加するにつれて高さも自動的に増加します。次に、上記の要件を達成するために div に最大の高さを与えます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。