3

GoogleChromeのテキストフィールドのサイズを変更する必要があります。テキストフィールドの端を水平方向と垂直方向にドラッグできるようにしたい。

これは私がこれまでに試したことです。テキストフィールドの隅にサイズ変更アイコンが表示されていますが、どちらの方向にも移動できません。私は使用style="resize:horizontal;"したことがあります私がどこで間違っているのか教えてもらえますか...ありがとう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Text Feilds</title>
       <script type="text/javascript">
       </script>
 </head>
<body>
<table>
<tr>
<td>
<input type="text" id="txt1" style="resize:horizontal;" />
<input type="text" id="txt2" style="resize:both;" />
<input type="text" id="txt3" style="resize:vertical;"/>
</td>
</tr>
</table>

</body>
</html>
4

3 に答える 3

5

仕様により、プロパティの設定に加えて、プロパティを以外の値に<input type=text>設定することで、任意の要素（要素を含む）のサイズを変更できます。overflowvisibleresize

resize実際には、プロパティをまったくサポートしているブラウザでさえ、その適用性に制限がある場合があります。上記を行った場合、Chromeは<input type=text>要素のサイズを変更できません。明らかにそれを行おうとしているので、これはおそらくバグです。サイズ変更ハンドルが表示されます。一方、Safariではresize、を設定せずに、を設定しただけでもサイズを変更できますoverflow。

Chromeで機能するように見える回避策がありますが、見た目は不格好で堅牢ではありません。input要素をの中に入れ、divサイズ変更可能にして、幅を100％近くにdiv設定します。inputこれは物事を台無しにするので、完全に100％ではありません（サイズ変更ハンドルの余地がありません）。このようなもの：

<div style="resize: horizontal; width: 15em; 
            overflow: auto; border: solid gray 1px">
  <input style="width: 96%; border: none; resize: none">
</div>
于 2012-08-30T08:07:57.997 に答える
2

代わりにtextarea要素を使用してください。

ここの例

于 2012-08-30T06:46:12.597 に答える
0

resizehtml入力タイプのスタイルプロパティではありませんtext。つまり、テキスト入力タグに間違った属性を割り当てようとしているということです。

詳細については、このリンクを確認してください。リンクから

表示以外の「オーバーフロー」のある要素に適用

textarea他の回答で説明されているように使用してください。

于 2012-08-30T06:55:57.723 に答える