-1

メールアカウント用の入力ボックスがあり、bg-imageは「@ mydomain.com」が右側に配置されており、ユーザーは自分のシステムで自分のメールアカウントを作成できます。

たとえば「behzad」などのユーザーを入力した後、入力のbg-imageが左側に表示され、空のスペースがある場合はそれを埋めます。

たとえば、ユーザー名に「x」と入力すると、「@ mydomain.com」が右側に配置されるため、「x」と「@ mydomain.com」の間に多くの空き領域があり、「x（ SPACE SPACE SPACE SPACE SPACE ...）@ mydomain.com "その入力ボックスをぼかすと、「x@mydomain.com」のようになります。

$('#email-input').blur(function(){
    $(this).css('background', 'new_position')
});

ユーザー入力文字列の幅に基づいて「new_position」をどのように決定できますか？

4

3 に答える 3

3

個人的には、この問題に対する Twitter Bootstrap のアプローチが気に入っています: http://jsfiddle.net/QvR6f/2/

背景画像を使用する代わりに、テキスト ボックスの最後に別の要素を貼り付けます。

于 2012-08-19T08:22:43.977 に答える
1

これは、入力ボックスと同じフォント、サイズなどを持つ非表示のページ要素を使用して行うことができます。そのコンテンツをユーザーが書いたテキストに設定してから、その幅を読み取ります。

編集：

この手法の例を次に示します: http://www.easyjquery.com/onload-fit-input-size-to-length-of-text/

  function resizeIt(field) {
    var measure = $("#measure");
    measure.text(field.val());
    field.css("width", (measure.width() + 16) + "px");
  }

measure入力ボックスと同じフォーマットを持つ文書内のスパンになります。field入力ボックスです。

また、入力ボックスの背景画像を使用する代わりに、入力ボックスの横に配置して、ユーザーが非常に長い文字列を書いてもドメイン名が「上書き」されないようにすることも考えていました。

于 2012-08-19T08:21:52.433 に答える
0

これが私がこれを理解した方法です：

$('#username').blur(function(){
    var user_input = $('#username').val();
    $(this).removeClass('email-input');
    $('#username').val(user_input+'@mydomain.com');
});

空き容量がなく、文字列の幅を決定せずに必要なものを取得します。

みんな、ありがとう。

于 2012-08-19T08:30:48.470 に答える