¿Cómo puedo agregar una inamovible prefijo a un HTML campo de entrada?

esto funciona bien para mí:

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

Que no es posible. Usted puede poner un valor en el campo de entrada, pero puede ser eliminado.

Usted puede poner el texto fuera del campo de entrada, que la protegen de ser eliminado, pero no se incluirá en el valor cuando el formulario es enviado.

Puede utilizar el posicionamiento absoluto para poner el campo de entrada en la parte superior del texto, y el uso de relleno en el campo para que usted comience a escribir después del texto. Ejemplo:

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>

Yo tenía el mismo problema y resuelto sin el uso de jquery, de la simple CSS y HTML. La solución se ve elegante y el usuario será inmediatamente a entender cómo funciona.

Utilizar el siguiente código html:

CSS:

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

HTML:

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

    

El resultado será parecido a este (copia el resultado de mi script, por lo que no dice http://):

Tenga en cuenta que usted sólo tiene que anteponer http://en su guión, pero que va a hacer que funcione a la perfección.

Esto es sólo a mí a jugar, pero usted puede hacer una falso extensión del cuadro de texto. En este ejemplo, básicamente, las chuletas de fuera del borde izquierdo de la caja de texto y se concatena un falso cuadro de texto a la izquierda.

Sólo funciona en Chrome AFAICT. Usted tendrá que añadir condicional hojas de estilo para cada navegador si te decides por este método.

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

Todo probado!

JS:

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

HTML:

<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://">

He visto algunos de formularios web forms incluya este valor fuera del campo, por ejemplo,

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

Pero si usted está empeñado en hacer valer el valor a través de JavaScript (y tenga en cuenta que los usuarios pueden activar JavaScript desactivado), usted podría escribir una función que se activa cada vez que el usuario escribe en el campo, y añade http:// para el inicio del campo si no lo hay. 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;
    }
});

Comprobar este formato util y un prefijo de la aplicación para ello:

• no de fallas de
• flexibilidad con regex
• cualquier input evento (teclado, ratón, arrastrar-n-gota, etc.)
• universal utilidad (extra formateadores puede ser añadido)
• error probado

JS:

//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://'));

CSS:

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

HTML:

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

Puro CSS solución basada en la hicimos etiqueta div y span entrada de combinación, por favor consulte la siguiente manera

CSS:

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

HTML:

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

Hay una forma de hacerlo en javascript, pero me temo que es más problemas de lo que vale.

Sin embargo, si usted está seguro de que el texto no va a cambiar con el tiempo, usted puede utilizar un CSS imagen de fondo para la entrada de texto que es una imagen de su texto » http://‘. A continuación, puedes agregar algunos padding-left hasta la entrada del usuario comienza justo al lado del final de su imagen.

Si usted insiste en la ‘http://’ siendo el valor por defecto, añadir el atributo «value» de la etiqueta de entrada:

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

Permitir a los usuarios eliminar si se desea, sin embargo, validar cuando el formulario es enviado. (jQuery validation plugin)

No tan limpio, pero no permitir a los usuarios eliminar el prefijo

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

No estoy seguro acerca de jQuery, pero en la llanura JS, usted puede tratar de detectar cuando el campo de los cambios y si el cambio de alguna manera arruinado el prefijo, agregar de nuevo (no es 100% infalible – si usted quiere, usted tiene que sólo hay que poner el «http://» en un espacio fuera del campo de entrada y añadir más tarde mediante programación):

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

Por favor, tenga en cuenta que un extraño comportamiento es realmente confuso para el usuario sin explicación explícita de antemano, O un pop-up (puede ser no-modal uno) explicando que corrigió su error para él.

JS:

$("input").keyup(function(e) {
  var oldvalue = $(this).val();
  var field = this;
  if (field.value.indexOf('http://') === -1 &&
    field.value.indexOf('https://') === -1) {
    $(field).val('http://');
  }
});

HTML:

<input type="text" value='http://'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

ACTUALIZACIÓN: Guillaumesm la respuesta de 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)) 
    }
}

Esto es para el cuadro de texto, si el usuario olvidó poner http://a continuación, se añade en otro caso no.

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