Html Put a fixed text on an input text

Question

How can i put a default text in an input html element which user can\'t delete (fixed text on start of the input).

The second thing what i want that the cursor will b

Answer 1

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 2

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 3

try this one might be helpful for you.

http://jsfiddle.net/pZLcg/

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

Answer 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>

Answer 5

just use placeholder="Name" for example:

Answer 6

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)