0

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.

m0s
  • 4,250
  • 9
  • 41
  • 64

2 Answers2

1

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
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 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 Jun 25 '10 at 12:00
  • @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 Jun 25 '10 at 12:02
  • Yes... I need this for a very specific textbox in my app. – m0s Jun 25 '10 at 12:20
  • @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 Jun 25 '10 at 12:31
  • 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 Jun 25 '10 at 13:10
0

Maybe this Jeditable ? and here you have the demo .

Nicolo' Verrini
  • 83
  • 7