Sliding Text in Text Input

Question

Is there any way make some of the text slide left and disappear in the text input after the user puts a certain number of characters. For example when a user is typing their credit card number after the 16th number is inputted the number slides left in the input field and only the last 4 digits of the number is visible

Answer 1

There's no animation here, but I can certainly help add that if you need.

Live Demo: http://jsfiddle.net/7TVxC/1/

First set up a variable to hold the input after you have removed the other characters.

var ccNum;

Then make your function that checks if the input length is 16, save the input into the variable. Then we take off the first 12 characters leaving only the last 4.

Then we ne turn off the input so they don't think it's a bug. (You could probably set it up so they can still delete the characters, which would then return the input to normal showing all the characters but the one they deleted.)

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

Alternatively you could do some css hackery and add a negative text-indent inside the if , but that could get tricky with different character sizes.

Answer 2

It is possible, but it involves a lot of work.

1 . Set up the input and its styles, something like this: http://jsfiddle.net/FMmvV/

Set up a jQuery event that triggers whenever someone types in the input. Then, do something when the input has 16 characters.

2 . The hard part is this: to have a fluid, smooth animation you'll want to animate the text inside the input via the text-indent property. Since it asks for pixel numbers, you'll also need to calculate the exact width of the first 12 characters so that you can properly offset the text by the correct amount.

This question might have some relevant information regarding how to calculate the width of a text without knowing the font family or font size: https://stackoverflow.com/a/3395975/1718121

3 . Clean up afterwards by removing the text-indent and the first 12 characters, add some functions that will allow your users to reset their input and re-enter something else.