20

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.

Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
Brahim
  • 309
  • 1
  • 2
  • 13
  • 2
    You will need javascript to do this. Also why do you want to do this? Why not add a label in front of the input or the like? I think this approach will confuse users. – Peter Rasmussen Apr 26 '13 at 09:15
  • How about `placeholder`? – Vucko Apr 26 '13 at 09:16
  • 1
    @Vucko placeholders get removed when focused and text entered. – Henrik Andersson Apr 26 '13 at 09:16
  • 1
    Does the text have to be in the input box? If not, check the "Prepended and appended inputs" section in Bootstrap's Forms documentation (http://twitter.github.io/bootstrap/base-css.html#forms). You can append / prepend text to an input box – Osiris Apr 26 '13 at 09:16
  • possible duplicate of [Having a permanent value in an input field while still being able to add text to it](http://stackoverflow.com/questions/7453215/having-a-permanent-value-in-an-input-field-while-still-being-able-to-add-text-to) – dsgriffin Apr 26 '13 at 09:16
  • possible duplicate of http://stackoverflow.com/questions/11626315/html-permanent-placeholder-workaround – dsgriffin Apr 26 '13 at 09:19
  • @limelights what's the point on having a non-removing text in the `input` field ? Then the user will enter some text, he won't see it because of that non-removed text. – Vucko Apr 26 '13 at 09:20
  • 1
    @Vucko beats me, normally I find that it only confuses the user if the input field isn't cleared. – Henrik Andersson Apr 26 '13 at 09:20
  • @Osiris Thanks, that's what I need. BTW, the link for Bootstrap "Prepended and appended inputs" has been changed to: http://getbootstrap.com/2.3.2/base-css.html#forms – Frank Fang Jul 26 '16 at 04:49

7 Answers7

34

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>
Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
Manish Sharma
  • 1,670
  • 14
  • 20
10

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" />
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Ben Besuijen
  • 624
  • 9
  • 23
4

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Helmyano
  • 143
  • 1
  • 7
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" />
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Eduardo de Souza
  • 181
  • 6
1

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)

Prateek Gupta
  • 2,422
  • 2
  • 16
  • 30
0

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/

matpol
  • 3,042
  • 1
  • 15
  • 18
  • YES THE Text must be in the input, the first part of text in fixxed but the user can add some text just after the fixed Text . – Brahim Apr 26 '13 at 09:33
  • do that in the backend? or do it with js once the form is submitted. – matpol Apr 26 '13 at 09:53
  • Whilst this may theoretically answer the question in 2013, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Especially now the link is dead – mplungjan Apr 11 '20 at 17:58
-8

just use placeholder="Name" for example:

name
  • 1
  • 2
    The placeholder attribute is not fixed, when you type it replaces the placeholder with your typed in text – Nicholas Apr 14 '15 at 10:32