это хорошо работает для меня:

$("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/

Это невозможно. Вы можете поместить значение в поле ввода, но его можно удалить.

Вы можете поместить текст за пределы поля ввода, что защитит его от удаления, но он не будет включен в значение при публикации формы.

Вы можете использовать абсолютное позиционирование, чтобы поместить поле ввода поверх текста, и использовать отступы в поле, чтобы начать печатать после текста. Пример:

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>

У меня была та же проблема, и я решил ее без использования jquery, просто с помощью CSS и HTML. Решение выглядит элегантно, и пользователь сразу поймет, как оно работает.

Используйте следующий код в вашем 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>

    

Результат будет выглядеть следующим образом (скопировал результат из моего скрипта, поэтому он не говорит http: //):

Обратите внимание, что вам нужно только добавить http: // в вашем скрипте, но это заставит его работать отлично.

Это только я играю, но вы можете сделать искусственное расширение текстового поля. Этот пример в основном отсекает левую границу текстового поля и объединяет ложное текстовое поле слева.

Работает только в Chrome AFAICT . Вам нужно будет добавить условные таблицы стилей для каждого браузера, если вы решите использовать этот метод.

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

Все проверено!

$('#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://">

Я видел, что некоторые веб-формы включают это значение вне поля, например

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

Но если вы не можете использовать значение с помощью JavaScript (и помните, что пользователи могут отключить JavaScript), вы можете написать функцию, которая запускается каждый раз, когда пользователь вводит в поле, и добавляет http://ее в начало поля. если его там нет Например

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;
    }
});

Проверьте этот формат util и префиксную реализацию для него:

• без сбоев
• гибкость с регулярным выражением
• любое inputсобытие ( клавиатура , мышь , перетаскивание и т. д.)
• универсальная утилита (могут быть добавлены дополнительные форматеры)
• ошибка проверена

// Util function
function addFormatter (input, formatFn) {
  let oldValue = input.value;
  
  const handleInput = 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 formatter
function regexPrefix (regex, prefix) {
  return (newValue, oldValue) => regex.test(newValue) ? newValue : (newValue ? oldValue : prefix);
}

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

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

<input type="text" id="link" />

Чистое решение на основе CSS, которое мы сделали, - div div и комбинация ввода span, пожалуйста, обратитесь к следующему

.lable {
  background-color: #dedede;
  width: 50%;
  padding: 15px;
  border: 1px solid #FF0000;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px 5px;
}
.snehainput {
  background-color: #dedede;
  border-left: 1px solid #000000;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 0px;
  padding: 2px 5px;
  color: #666666;
  outline: none;
}

<div class="lable">
  <span class="prefix">971</span>
  <input class="snehainput" type="text" value="" />
</div>

Есть способ сделать это в javascript, но я боюсь, что это больше проблем, чем оно того стоит.

Однако, если вы уверены, что текст не изменится со временем, вы можете использовать фоновое изображение CSS для ввода текста, который является изображением вашего текста 'http: //'. Затем вы можете просто добавить отступ слева до тех пор, пока ввод пользователя не начнется прямо рядом с концом вашего изображения.

Если вы настаиваете на том, чтобы значение http: // было значением по умолчанию, добавьте атрибут «value» во входной тег:

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

Разрешить пользователям удалить его, если они хотят, но проверить, когда форма отправлена. ( плагин проверки jQuery )

Не так чисто, но это не позволяет пользователям удалить ваш префикс

<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(''));
});

Я не уверен насчет jQuery, но в простом JS вы можете попытаться определить, когда поле изменяется, и если изменение каким-то образом испортило префикс, добавьте его обратно (не на 100% надежное - если вы этого хотите, вам нужно просто поставить "http: //" в промежутке вне поля ввода и добавьте позже программно):

<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)'>

Обратите внимание, что такое странное поведение действительно вводит пользователя в заблуждение без предварительного объяснения или ИЛИ всплывающего окна (может быть немодального), объясняющего, что вы исправили его ошибку для него.

ОБНОВЛЕНИЕ: ответ Гийомеса на 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)) 
    }
}

Это для текстового поля, если пользователь забыл ввести http: //, он добавит, иначе не будет.

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;
    }