Fix a character to text input box using javascript/jquery

javascript text input user-input
Eddie picture Eddie · Feb 7, 2010 · Viewed 16.2k times · Source

I am looking for a way to 'fix' a dollar symbol $ to a text input box eg <input type="text" value="$" /> but make it not possible for the default value to be removed, so that whatever the user inputs, there is always a $ symbol 'prepending' input.

Cheers

Answer

Pekka picture Pekka · Feb 7, 2010

There is the possibility of a background-image but it's difficult to maintain, and doesn't react to font size changes, which makes it the less optimal choice IMO.

A better way in my opionion would be:

  • Put a <span>$</span> next to the input (before it, actually).

  • give it position: relative; left: 20px.

  • The $ sign then moves into the input field.

  • Then, give the input field padding-left: 24px.

  • Voilá! The $ sign is in the input field, does not obscure anything, and cannot be removed.

Related questions

How to get an input text value in JavaScript

How go get an input text value in JavaScript? <script language="javascript" type="text/javascript"> lol = document.getElementById('lolz').value; function kk(){ alert(lol); } </script> <body> <input type="text" name="enter" class="enter" …

Read More
How do you make just some text, inside an input text field, bold?

I'm trying to get bold specific text, inside an input text field. I'm not sure how to go about it since html code isn't interpreted inside a text field, so anything like <b> won't work. Is it possible …

Read More
How to remove spaces from a string using JavaScript?

How to remove spaces in a string? For instance: Input: '/var/www/site/Brand new document.docx' Output: '/var/www/site/Brandnewdocument.docx'

Read More