How can I add an unremovable prefix to an HTML input field?

Question

Using jQuery, how can I add a default value of http:// into an input field that can’t be removed, but that still allows you to type a URL after it?

Defa

Answer 1

That's not possible. You can put a value in the input field, but it can be deleted.

You can put the text outside the input field, that will protect it from being deleted, but it won't be included in the value when the form is posted.

You can use absolute positioning to put the input field on top of the text, and use padding in the field so that you start typing after the text. Example:

CSS:

.UrlInput { position: relative; }
.UrlInput label { position: absolute; left: 3px; top: 3px; color: #999; }
.UrlInput input { position: absolute; left: 0; top: 0; padding-left:40px; }

HTML:

<div class="UrlInput">
  <label>http://</label>
  <input name="Url" type="text" />
</div>

Answer 2

This is just me playing around, but you can make a fake extension of the textbox. This example basically chops off the left border of the textbox and concatenates a fake textbox to the left.

Works only in Chrome AFAICT. You will have to add conditional stylesheets for each browser if you decide on this method.

http://jsfiddle.net/G9Bsc/1/

Answer 3

There is a way to do this in javascript, but I'm afraid it is more trouble than it's worth.

However, if you're sure the text won't change over time, you can use a CSS background image for the text input that is an image of your text 'http://'. Then you can just add some padding-left until the user's input starts right next to the end of your image.

Answer 4

this works well for me:

$("input").keydown(function(e) {
var oldvalue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value.indexOf('http://') !== 0) {
        $(field).val(oldvalue);
    } 
}, 1);
});

http://jsfiddle.net/J2BKU/

Answer 5

All tested!

$('#myUrl').keyup(function(e) {
  if (this.value.length < 7) {
    this.value = 'http://';
  } else if (this.value.indexOf('http://') !== 0) {
    this.value = 'http://' + String.fromCharCode(e.which);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myUrl">URL:</label>
<input id="myUrl" type="text" value="http://">

Answer 6

UPDATE: Guillaumesm's answer to Ecmascript 5:

Form.prototype.set_HttpPrefix = function (e) {
    if (e.data.$url.val().length < 7) {
        e.data.$url.val('http://')

    }    
    else if (e.data.$url.val().indexOf('http://') !== 0) {
        e.data.$url.val('http://' + String.fromCharCode(e.which)) 
    }
}