テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード

テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード

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

<HTML>
<ヘッド>
<TITLE>テキストエリアの幅と高さの自動適応処理方法</TITLE>
<!-- コントロール幅の自動調整 -->
<スタイル タイプ="text/css">
.コメント{
width:100%;/*親レイアウトの幅に自動的に適応します*/
オーバーフロー:自動;
単語区切り:すべて区切り;
/*IEでの改行問題を解決(自動的に1行で表示されるのを防ぐ、主にIEの互換性問題を解決するため。IE8では幅を100%にするとテキストフィールドの容量が1行を超えると、
テキスト コンテンツをダブルクリックすると、自動的に 1 行に変更されるため、改行を制御するには IE 独自の改行プロパティ「word-break または word-wrap」のみを使用できます)*/
}
</スタイル>
</HEAD>

<本文>
<FORM METHOD=POST ACTION= " ">
<!-- 主に高さの自動調整を制御します -->

<!-- 最初のものは通常のテキストエリアです -->
<textarea class="comments" 行数="10" 列数="10"> </textarea>
<!-- 次の 2 つの方法は、textarea の行の高さがクラス コンテンツの高さに自動的に適応するという問題を解決できます -->
<textarea class="comments" rows=1 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>

<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>
</フォーム>
</本文>
</HTML>

<<:  Iframe 適応高さコードに関する 3 つの議論

>>:  jQueryは要素を追加した後に元のイベントが実行されない問題を解決します

推薦する

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

CSSで制御可能な点線を実装する方法

序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...

開発者とオペレーターが注目すべき Linux デバッグ ツール [推奨]

システム パフォーマンスの専門家である Brendan D. Gregg 氏は、LinuxCon N...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします(Webkit)

コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...

VSCode 構成 Git メソッドの手順

Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...

MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析

以前、「MySQL でコミットされていないトランザクション情報を検索する方法」というタイトルのブログ...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

仮想マシンに Linux rhel7.3 オペレーティング システムをインストールする (具体的な手順)

仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...