web-dev-qa-db-ja.com

入力幅を超える入力テキストを表示する

ユーザーが小さな入力フィールドに広範なテキストを入力すると、いくつか問題が発生します。

切り捨てられるデータを表示するための良い方法が必要です。

Bootstrapベースのツールチップまたはホバー時のポップオーバーを使用しようとしましたが、検証にこの種類のコンポーネントをすでに使用しています。

これが私が話していることの例です。

<input type="text" style="width: 50px" value="xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx">

この入力内のすべてのデータを表示する良い方法はありますか？

htmlinputinput-fieldscss
8
John

数か月前にこの問題に遭遇し、その解決策を見つけようとしました。私にとって最良かつ最も安価な解決策は、入力フィールドの下にテキストを配置することです。これは、入力されたテキストが入力テキストの幅より長くなる場合にのみ行います。これは、入力または表示された情報が重要で、テキスト全体が表示されない場合に間違いのリスクがない限り、行わないでください。

enter image description here

4
Salman Ehsan

テキストフィールドの代わりにtextareaを使用し、次に Autosize のようなjqueryプラグインを使用して、必要に応じてフィールドを拡大できます。

3
Dave Nelson

タイトルを使用して、ユーザーが入力にカーソルを合わせてすべてのテキストを表示できるようにします。

例：

<input type="text" 
       title="something that exceeds the width of the box" 
       value="something that exceeds the width of the box">
2
Ben Kauffman