We Keep Coding

Make a text-input field expand in width as text is entered

I am trying to have a text-input field that is only wide enough to handle one character.
But when the one character is typed, it grows to the left and to the right so now it can hold 2 characters.
Then, when the second character is typed grows again so that it can hold 3 characters.
This goes on and on as long as the user types in input.
How can this be done in javascript / jQuery ?

This is a good question but no easy way to do it really first you need a max-width setting in the css of your text input,
after witch you can use some jQuery like so
$("#input_id").keyup(function(){
$("body").append("<div id=\"remove_me\">"+$(this).val()+"</div>");
var width = $("#remove_me").width()+30;
$(this).animate({"width":width});
$("#remove_me").remove();
});

Sliding Text in Text Input

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

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.

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.

1 : Set visual focus of an text field | 2 : deal with the char offset (JAVASCRIPT)

First of all, I work with chrome, but it should work on firefox. not on IE.
I'm curently working on a pesonal project, so no ruch, the idea is to make a very simple js text editor for webpage, you can click any 'p' element in a page and a textfield(not area) will open containing the value of the clicked element. The cursor in the text field goes exactly where the user clicked in the text. He can also select a word or a sentence.
I've almost finish the dev part, had many troubleshooting, this forum, others and goolgle as helped me a lot but still I have two problems.
The first one would be that when you click the text the cursor goes to the right place in the text field, but the text field if contain longer string than width doesn't scroll to the right place.
The second one is when you select a part of the text in the 'p' element, the script add a pink background 'span' arround the selected text on mouse up, I also remove the last span on mouse down, so before the mouse up. But the startoffset and endoffset will start couting from the end of the span, not the begining of the 'p'
I don't know if you understand everything, I don't have the right vocabulary and I'm french...
Anyway, thanks !
CHECK IT THERE : http://jsfiddle.net/ilycode/KBnKc/4/

Show exact same selection range in two text fields

I have two text fields on top of one another. The one on top the user types into. The one behind it auto-completes out words with a light gray font. It works great, until you're up against the edge of the text field on top. How can I scroll the bottom text field along with the top to keep their text perfectly overlaid?
Thanks in advance.

So, the problem is that the user types until it fills all the space in the textbox, keeps typing, top textbox scrolls, but text on the bottom textbox doesn't?
If that's the case, i didn't try it, but I think it could be solved by handling cursor position in the bottom textbox. That can be done by using the function setSelectionRange. To set it to the end:
ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length);.
Other way to move the cursor to the end of the textbox is by, first, setting focus on the control and, second, assigning it's value.

Does anyone know how to change the character of a textfield caret with javascript?

Like the title reads, I want to change the character of a caret. Maybe make it a letter or something?
Thanks.

You can do something near this, but its very dificult.
In you textfield bind a event to keydown, for example.
Each char typed, you slide a floating <img> above textarea.
If user click in textarea, update position getting X and Y from onclick.
Obs: the font must be monospaced. Ex: if every font have 20px and user press backspace, you slide this gif to the left 20px.
EDIT
I just made a hello world, in jsfiddle.
Of course, it's an example, but test typing and use backspace and enter to see caret go back and foward.
In this example there are a lot of bugs to fix, like:
Use of <backspace> that cleans all line
Use of arrows that in overflow textarea margins
Use of mouse must update caret position...

That's not possible in HTML/JavaScript.