4

テキストに合わせて高さが自動調整されるテキスト入力を作成するにはどうすればよいのでしょうか。たとえば、段落の入力を開始すると、数行から段落に収まるように拡張されます。

これが私が現在持っているものです：

#commenttext {
  width: 413px;
  min-height: 22px;
  max-height: 100%;
  display: inline;
  font-size: 11px;
  color: #777777;
  word-wrap: break-word;
  font-family: "Open Sans", "Tahoma";
  top: 7px;
  position: relative;
  left: 7px;
  padding-left: 7px;
}
<form action="" method="POST">
  <input type="text" id="commenttext">
</form>

しかし、それは単なる通常のテキスト領域です。

入力する行数が増えるにつれて、そのテキスト領域が高くなるようにするにはどうすればよいですか? Javascript は必要ですか?

4

2 に答える 2

10

CSS のみの解決策は次のとおりです。aを true に設定してdiv使用します。contenteditable

<div contenteditable="true"
    style="width:200px;min-height:20px;border:1px solid #ccc;"></div>

例については、このJSFiddleを参照してください。

編集:inputこのテキストを送信できるようにするには、フィールド に入力するための JavaScript が少し必要です。これをフォームに追加します。

<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
    <input id="hidden_data" name="data" type="hidden"/>
    <div id="showing_data" contenteditable="true"
        style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>

これにより、の内容がdiv非表示inputフィールドに配置されるため、他のものと一緒にサーバーに送信されPOSTます。

例については、この (更新された) JSFiddleを参照してください。

于 2013-10-10T03:24:36.717 に答える
0

こちらの投稿をご覧ください。

自動サイズ変更でテキストエリアを作成する

目的を達成するために必要なすべてのコード (HTML および Javascript) が含まれています。

于 2013-10-10T03:17:26.937 に答える