Put fixed text on an input text box - html

Question

How can I put default text in an HTML text input element which the user can't delete (fixed text at the start of the input).
The second thing what I want is that the cursor will be positioned after this fixed text.

Answer 1

Try this one. It might be helpful for you. It positions the text over the text input using absolute positioning.
.input-box {
position: relative;
}
input {
display: block;
border: 1px solid #d7d6d6;
background: #fff;
padding: 10px 10px 10px 20px;
width: 195px;
}
.unit {
position: absolute;
display: block;
left: 5px;
top: 10px;
z-index: 9;
}
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">£</span>
</div>

Answer 2

If you want to fix this with only an input element you can use an inline svg background.
http://codepen.io/anon/pen/pJoBya
To make this work in Internet Explorer you need encodeURIComponent the SVG image
http://pressbin.com/tools/urlencode_urldecode/
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;
}
<input type="text" />

Answer 3

I know this question is already answered, but here is another way to do it.
I tested this code with..
Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15
#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*/
}
<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>

Answer 4

var requiredText = 'https://';
$('#site').on('input', function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="site" />

Answer 5

You can also do it by using bootstrap :
div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
You can check here.(check the username field)

Answer 6

Absolutely position the text over the beginning of the field then add left padding to the field until the cursor lines up to the right position. See example here:
http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

Answer 7

just use placeholder="Name"
for example: