I am looking for code/plug-in/whatever that will make a textbox behave similar to what happens when you press the Insert button in a text editor and anything you type is typed over existing text. I am new to web dev, please be little specific. Thanks.
+1
A:
A lightweight way to do this is the labelOver plugin, you can see a demo here.
Your markup looks something like this:
<div class="label">
<label for="applied">Applied</label>
<input type="text" id="applied" />
</div>
Then the jQuery:
$('label').labelOver('over');
You adjust the CSS for your needs, look at the demo page for an example. For source, look here, very lightweight. Another big plus that some alternative plugin's don't do: it also degrades gracefully with JavaScript disabled, and since clicking a label for an input focuses it in any browser, it's using the built-in behavior as a fall-back.
There are alternatives certainly, but after trying several, this is the one I settled on: for size, ability to customize styling easily, etc.
Nick Craver
2010-06-25 11:45:55
This is an interesting and useful plugin, but it doesn't seem to do what I need. This just shows a text over a text-field, while I need to change the characters of the text-field when user starts typing in. ie. text-field contains "12345" when user puts cursor at beginning and types '9' the textbox content becomes "92345", NOT "912345".
m0s
2010-06-25 12:00:47
@m0s - Ahh, not sure there are plugins for this, you're basically looking for the `ins` key to be pressed on the keyboard, that kind of functionality?
Nick Craver
2010-06-25 12:02:18
Yes... I need this for a very specific textbox in my app.
m0s
2010-06-25 12:20:23
@m0s - Sorry...I've never seen a plugin like this...the browser range code is all very ugly, this is the route you'll have to go down AFAIK: http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse Just curious, say a person selects some text and starts type, selecting more than 1 letter, what would happen?
Nick Craver
2010-06-25 12:31:48
np. been googling for a solution for couple hours, found nothing. I thought this kind of things should be easy to do in web, but oh well...good question :D in my case I would either not let them select at all, or would change only the first character in the selection leaving the rest unchanged.
m0s
2010-06-25 13:10:22