Geek Answers Handbook

Html Put fixed text on input text

How can I put the default text in the html input element that the user cannot delete (ficed text when the input starts). Secondly, I want the cursor to be indexed after this fixed text.

+4
source share
6 answers

try this, it may be useful to you.

http://jsfiddle.net/pZLcg/

<div class="input-box"> <input value="" autofocus="autofocus"/> <span class="unit">£</span> </div>
+18
source

I know that this question has already been answered, but here is another way to do it.

 <!DOCTYPE html> <html> <head> <style> #text_container { padding: 1px; /*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/ border: 1px solid activeborder; /*Create our fake border :D*/ } #text_container > label { color: activeborder; background-color: white; -webkit-touch-callout: none; /*Make the label text unselectable*/ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #text_container > input { border: none; /*We have our fake border already :D*/ } </style> </head> <body> <span id="text_container"> <!-- Don't break the following line to avoid any gaps between the label text and the input text --> <label>http://www.</label><input type="text" /> </span> </body> </html>

I checked this code with.

 Firefox 22 Google Chrome 28 Internet Explorer 10 Safari 5 Opera 15
+4
source

If you want to fix this only with an input element, you can use the built-in svg background.

http://codepen.io/anon/pen/pJoBya

HTML

 <input type="text" />

CSS

 input { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat; border: 1px solid #555; box-sizing: border-box; font: 16px "Arial"; height: 30px; padding-left: 50px; width: 300px; }

To make this work in Internet Explorer, you need an encodeURIComponent SVG image http://pressbin.com/tools/urlencode_urldecode/

+4
source

Absolutely place the text at the beginning of the field, and then add left padding to the field until the cursor moves to the correct position. See an example here: http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

+1
source 
 var requiredText = 'http://'; $('#site').on('input',function() { if (String($(this).val()).indexOf(requiredText) == -1) { $(this).val(requiredText); } });
0
source

just use placeholder = "Name" for example:

-5
source

More articles:


All Articles