1

次のような入力要素があります。

<input value="hello world" class="my-input"/>

しかし、UIでは、「world」なしで「hello」のみを表示したい（つまり、値の最初の5文字を​​表示したい）

my-inputクラスを使用してこれを達成することは可能ですか？どうすればいいですか？

ありがとう

4

4 に答える 4

2

これを純粋にCSSで行うことはできませんが、jQueryを使用するとかなり簡単です。

var myInputVal = $(".my-input").val();
$(".my-input").val(myInputVal.substr(0, 5));

DEMOを参照してください。

入力の元の値を保持する必要がある場合（フォームが送信されると、「hello」ではなく「hello world」が送信されるように）、HTMLデータ属性を使用して元の値を「保存」してから次のように、フォームが送信されたときに取得します。

var myInput = $(".my-input");
var myInputVal = myInput.val();

myInput.data("original-value", myInputVal);
myInput.val(myInputVal.substr(0, 5));

$("form").submit(function(e) {
  e.preventDefault();
  myInput.val(myInput.data("original-value"));
  $(this).submit();
});
于 2013-03-14T21:03:01.883 に答える
1

これが純粋なCSSソリューションです

HTML:
<input value="1234567890" class="my-input" />

CSS:
input {
    font-family: monospace;
    font-size: 1em;
    width: 3.2em;
    padding: 0;
}

単位widthで表現を使用しますが：em

  • モノスペース フォントを使用する必要があります (または はmより大きくなりますi) 。
  • 1em幅ではなく、ユーザーがシステムで最終的に見る特定の等幅フォントの高さに等しくなります。M私の現在の Windows Vista では、デフォルトのモノスペースで 3.2em の幅を設定しましたが、マイレージは変わる可能性があります。

したがって、選択したフォントのセットに特に細心の注意を払い、さまざまな Windows OS (XP、Vista、Win7、および Win8 にはすべて特定のフォントがインストールされています。また、MS Office および Adob​​e Reader がインストールされているかどうかによっても異なります。デザイナー/開発者、Visual Thing や Creative blah などのツール、OS X、および Linux のフレーバーが対象です。そして携帯。またはfont-family、ダウンロードしたフォントから始めて@font-face、各 OS で同様の幅のフォントを使用することもできます...

CSS がユーザーによって無効化またはカスタマイズされている場合、それは失敗であるため、入力の幅に依存して意味を伝えたり、特定のトリックを実行したりしないでください。これは十分に堅牢ではありません (また、目の不自由なユーザーは、入力が視覚的に 5 文字の表示に制限されているにもかかわらず、さらに多くの文字が含まれていることを明らかに気にしたり、認識したりしません)。

于 2013-03-14T22:20:38.277 に答える
0

CSSだけでは無理だと思います。maxlength HTML 属性を使用するか、JavaScript で何かを行うことができます。それがあなたの求めているものではないことは理解していますが、それは不可能だと思います。

于 2013-03-14T21:07:37.847 に答える
0

maxlength入力の文字数を制限する新しい HTML5 属性があります。( jsFiddle )

<input value="hello" class="my-input" maxlength="5" />

どうやらこれに対するサポートはかなり良いです。

元の文字列 "hello world" に関する情報を保持したい場合は、JavaScript を使用する必要がありますが、これは CSS だけでは実現できません。width/属性をいじって近づけることはできますoverflowが、デバイスごとに異なります。

于 2013-03-14T21:08:26.873 に答える