How Can I Add An Unremovable Prefix To An Html Input Field?

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? Default: http:// Url: http://w

Solution 1:

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/

Solution 2:

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.textboxinput {
      border: 0px;
	    background-color: #FFF;
  }

 (short title): 
    <spanclass="textbox"> 
        http://
        <inputtype="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.

Solution 3:

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; }
.UrlInputlabel { position: absolute; left: 3px; top: 3px; color: #999; }
.UrlInputinput { position: absolute; left: 0; top: 0; padding-left:40px; }

HTML:

<divclass="UrlInput"><label>http://</label><inputname="Url"type="text" /></div>

Solution 4:

Check this format util and a prefix implementation for it:

• no glitching
• flexibility with regex
• any input event (keyboard, mouse, drag-n-drop, etc.)
• universal utility (extra formatters can be added)
• bug tested

// Util functionfunctionaddFormatter (input, formatFn) {
  let oldValue = input.value;
  
  consthandleInput = event => {
    const result = formatFn(input.value, oldValue, event);
    if (typeof result === 'string') {
      input.value = result;
    }
    
    oldValue = input.value;
  }

  handleInput();
  input.addEventListener("input", handleInput);
}

// Example implementation// HOF returning regex prefix formatterfunctionregexPrefix (regex, prefix) {
  return(newValue, oldValue) => regex.test(newValue) ? newValue : (newValue ? oldValue : prefix);
}

// Apply formatterconst input = document.getElementById('link');
addFormatter(input, regexPrefix(/^https?:\/\//, 'http://'));

input { padding: 0.5rem; font-size: 1rem; }

<inputtype="text"id="link" />

Solution 5:

I’ve seen some web forms include this value outside of the field, e.g.

<label for="url">URL:</label> http:// <input id="url"type="text">

But if you’re dead set on enforcing the value via JavaScript (and bear in mind that users can turn JavaScript off), you could write a function that fires every time the user types in the field, and adds http:// to the start of the field if it’s not there. E.g.

HTML:

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

 JavaScript:

$('#url').keyup(function(){

    if( this.value.indexOf('http://') !== 0 ){ 
        // Add lots more code here so that this actually works in practice.    // E.g. if the user deletes only some of the “http://”, if the // user types something before the “http://”, etc...this.value = 'http://' + this.value;
    }
});