1

ユーザーが特定の文字数を入力した後、テキスト入力でテキストの一部を左にスライドさせて非表示にする方法はありますか。たとえば、ユーザーが 16 番目の数字を入力した後にクレジット カード番号を入力すると、数字は入力フィールドの左にスライドし、数字の下 4 桁のみが表示されます。

4

2 に答える 2

3

ここにはアニメーションはありませんが、必要に応じてアニメーションを追加できます。

ライブデモ: http://jsfiddle.net/7TVxC/1/

他の文字を削除した後、最初に入力を保持する変数を設定します。

var ccNum;

次に、入力の長さが 16 であるかどうかをチェックする関数を作成し、入力を変数に保存します。次に、最初の 12 文字を削除して、最後の 4 文字だけを残します。

次に、入力をオフにして、バグだと思われないようにします。（おそらく、文字を削除できるように設定することができます。これにより、入力が通常の状態に戻り、削除された文字以外のすべての文字が表示されます。）

$('input').keyup(function(e){
    if($(this).val().length == 16){
        ccNum = $(this).val();
        $(this).val($(this).val().substr(12));
        $(this).prop('disabled', true);
    }
})

別の方法として、いくつかの css ハッカーを実行して 内に負のテキスト インデントを追加することもifできますが、文字サイズが異なると扱いにくくなる可能性があります。

于 2013-02-04T04:22:05.120 に答える
1

可能ですが、多くの作業が必要です。

1 . 入力とそのスタイルを次のように設定します: http://jsfiddle.net/FMmvV/

誰かが入力を入力するたびにトリガーされる jQuery イベントを設定します。次に、入力が 16 文字のときに何かを実行します。

2 . 難しい部分は次のとおりです。流動的で滑らかなアニメーションを作成するには、プロパティを介して入力内のテキストをアニメーション化する必要がありtext-indentます。ピクセル数を要求するため、最初の 12 文字の正確な幅を計算して、テキストを正しい量だけ適切にオフセットできるようにする必要があります。

この質問には、フォント ファミリやフォント サイズを知らなくてもテキストの幅を計算する方法に関する関連情報が含まれている可能性があります 。

3 . text-indent と最初の 12 文字を削除して後でクリーンアップし、ユーザーが入力をリセットして別の何かを再入力できるようにする関数をいくつか追加します。

于 2013-02-04T05:00:58.477 に答える