ホームページ > 記事 > ウェブフロントエンド > HTML5 で contentEditable を使用して複数行の高さを自動的に増やす text_html5 チュートリアルのヒント
contentEditable は、Microsoft によって開発され、逆コンパイルされて他のブラウザで使用されるグローバル プロパティです。この属性の主な機能は、ユーザーが要素内のコンテンツを編集できるようにすることです。そのため、要素はマウス フォーカスを取得できる要素である必要があり、マウスをクリックした後にユーザーにキャレットを提供して、ユーザーに次のことを促す必要があります。要素内のコンテンツは編集できます。 contentEditable プロパティは、true または false として指定できるブール値のプロパティです。
さらに、この属性には非表示の継承状態もあります。属性が true の場合、要素は編集を許可するように指定され、true または false が指定されると、要素は編集を許可しないように指定されます。 false の場合、要素の親要素が編集可能な場合、要素は編集可能になります。
さらに、contentEditable 属性に加えて、要素には isContentEditable 属性もあります。要素が編集可能な場合、この属性は true、要素が編集できない場合、この属性は false になります。
以下は contentEditable 属性の使用例です。contentEditable 属性がリスト要素に追加されると、読者はこの例をブラウザーで試すことができます。
このコードを実行した後の結果は以下のようになります:
行テキストの高さが自動的に増加します
複数行のテキスト ボックスに関して言えば、テキストエリアを使用することは非常に便利ですが、欠点が 1 つあります。文字数を指定することしかできません。対応する列と行を変更するか、CSS を直接使用して高さの幅を増やします。
Weibo への投稿に似た入力ボックスなど、特定の時点では依然として自動高さ調整が必要ですが、これは一般的な要件です。テキスト ボックスにはデフォルトの高さがあり、入力テキストがこの高さを超えると、自動的に高さが高くなります。最大制限がある必要があります。この制限を超えると、垂直スクロール バーが表示されます。
テキストエリアを使用してこの要件を満たしている場合は、テキストボックスの高さを動的に変更するために、js と連携してテキストの高さの変更を監視する必要もあります。これは、特にモバイル側では非常に不便であり、非科学的です。このとき、contenteditable 属性を使用できます。
例: