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

This is for the textbox, if user forgot to put http:// then it will add otherwise it won't.

if (this.value.length > 7) {
if(this.value.substring(0, 7)== "http://"  || this.value.substring(0, 
8)== "https://"){
    this.value = this.value;
    }
    else{
            this.value = "http://" + this.value;
    }

Answer 2

Material UI Inputs can accept an input adornment prop for prefixes or suffixes:

https://material-ui.com/api/input-adornment/

<TextField
      label="With normal TextField"
      id="standard-start-adornment"
      className={clsx(classes.margin, classes.textField)}
      InputProps={{
        startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
      }}
    />
    <FormControl className={clsx(classes.margin, classes.withoutLabel, classes.textField)}>
      <Input
        id="standard-adornment-weight"
        value={values.weight}
        onChange={handleChange('weight')}
        endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
        aria-describedby="standard-weight-helper-text"
        inputProps={{
          'aria-label': 'weight',
        }}
      />

Answer 3

If you insist on 'http://' being the the default value, add the "value" attribute to the input tag:

<input id="url" type="text" value="http://">

Allow users to remove it if they wish, yet validate when the form is sent. (jQuery's validation plugin)

Answer 4

Not so clean but it doesn't let users remove your prefix

<input type="text" name="membership_num" value="0201" id="membership_num">  

//prefix
$(document).on('keyup','#membership_num',function(){
  var original = $('#membership_num').val().split('');
  original[0] = "0";
  original[1] = "2";
  original[2] = "0";
  original[3] = "1";
  $('#membership_num').val(original.join(''));
});

Answer 5

I'm not sure about jQuery, but in plain JS, you can try to detect when the field changes and if the change somehow ruined the prefix, add it back (not 100% foolproof - if you want that, you have to just put the "http://" in a span outside the input field and add later programmatically):

<script>
function checkHttp(input) {
    // See if someone deleted 1 character from needed prefix.
    // We can't simply check if the string starts with the prefix
    // since the user may have backspaced out 1 character.
    input.value = input.value.replace(/^http:\/\//, "");
    input.value = input.value.replace(/^http:\//, "");            
    input.value = input.value.replace(/^http\/\//, "");            
    input.value = input.value.replace(/^htt:\/\//, "");            
    input.value = input.value.replace(/^htp:\/\//, "");            
    input.value = input.value.replace(/^ttp:\/\//, "");
    // This doesn't work if someone deletes - say via cut - >1 character.
    input.value = input.value.replace(/^/, "http://");
}
</script>
<input type='text' name='x' id='x' value='http://' onChange='checkHttp(this)'>

Please note that such a weird behavior is really confusing to the user without either explicit explanation beforehand, OR a pop-up (may be non-modal one) explaining that you fixed his mistake for him.

Answer 6

I had the same problem and solved it without using jquery, just simple CSS and HTML. The solution looks elegant and the user will immediately understand how it works.

Use the following code in your html:

span.textbox {
	    background-color: #FFF;
	    color: #888;
	    line-height:20px;
	    height:20px;
	    padding:3px;
	    border:1px #888 solid;
	    font-size:9pt;
}
    
span.textbox input {
      border: 0px;
	    background-color: #FFF;
  }

 (short title): 
    <span class="textbox"> 
        http://
        <input type="text" name="url" autofocus />
    </span>

    

The result will look like this (copied the result from my script, so it doesn't say http://):

Note that you only have to prepend the http:// in your script, but that will make it work perfectly.