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

Usando jQuery, ¿cómo puedo agregar un valor predeterminado de http:// en un campo de entrada que no se puede eliminar, pero que aún te permite escribir una URL después de él?

Valor predeterminado: http: //
URL: http://www.domain.name

Solutions Collecting From Web of "¿Cómo puedo agregar un prefijo inamovible a un campo de entrada HTML?"

Esto funciona bien para mi:

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

Eso no es posible. Puede poner un valor en el campo de entrada, pero puede eliminarse.

Puede colocar el texto fuera del campo de entrada, lo que evitará que se elimine, pero no se incluirá en el valor cuando se publique el formulario.

Puede usar el posicionamiento absoluto para colocar el campo de entrada en la parte superior del texto y usar relleno en el campo para que 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:

 

Tuve el mismo problema y lo resolví sin usar jquery, solo CSS y HTML simples. La solución se ve elegante y el usuario entenderá de inmediato cómo funciona.

Use el siguiente código en su html:

 (short title):  http://   

y como CSS usa:

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

El resultado se verá así (copió el resultado de mi script, por lo que no dice http: //):

enter image description here

Tenga en cuenta que solo debe anteponer el http: // en su secuencia de comandos, pero eso hará que funcione perfectamente.

Esto es solo yo jugando, pero puedes hacer una extensión falsa del cuadro de texto. Este ejemplo básicamente corta el borde izquierdo del cuadro de texto y concatena un cuadro de texto falso a la izquierda.

Funciona solo en Chrome AFAICT . Deberá agregar hojas de estilo condicionales para cada navegador si decide utilizar este método.

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

¡Todos probados!

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

He visto algunos formularios web que incluyen este valor fuera del campo, por ejemplo

  http://  

Pero si está decidido a hacer valer el valor a través de JavaScript (y tenga en cuenta que los usuarios pueden desactivar JavaScript), podría escribir una función que se active cada vez que el usuario ingrese el campo y agregue http:// al inicio del campo si no está allí. P.ej

HTML:

   

JavaScript:

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

Solución pura basada en CSS. Hicimos la combinación de entradas div wrapper y span, por favor refiérase a lo siguiente

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

Hay una forma de hacerlo en JavaScript, pero me temo que es más problemático de lo que vale.

Sin embargo, si está seguro de que el texto no cambiará con el tiempo, puede usar una imagen de fondo CSS para la entrada de texto que es una imagen de su texto ‘http: //’. Luego puede agregar algo de relleno: izquierda hasta que la entrada del usuario comience justo al final de su imagen.

Compruebe este formato de utilidad y una implementación de prefijo para él:

  • sin glitching
  • flexibilidad con expresiones regulares
  • cualquier evento de input ( teclado , mouse , arrastrar y soltar , etc.)
  • utilidad universal (se pueden agregar formadores adicionales)
  • error probado
 // 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; } 
  

Si insiste en que ‘http: //’ sea el valor predeterminado, agregue el atributo “valor” a la etiqueta de entrada:

  

Permita que los usuarios lo eliminen si lo desean, pero valide cuando se envíe el formulario. ( El complemento de validación de jQuery )

No tan limpio, pero no permite a los usuarios eliminar su prefijo

  //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 JS simple, puedes tratar de detectar cuándo cambia el campo y si el cambio de alguna manera arruinó el prefijo, agrégalo de nuevo (no es 100% infalible; si quieres eso, solo tienes que ponerlo el “http: //” en un lapso fuera del campo de entrada y agregarlo luego mediante progtwigción):

   

Tenga en cuenta que un comportamiento tan extraño es realmente confuso para el usuario sin una explicación explícita de antemano, O una ventana emergente (puede ser no modal) explicando que ha solucionado su error por él.

 $("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://'); } }); 
   

ACTUALIZACIÓN: respuesta de Guillaumesm a 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: //, entonces agregará lo contrario, no lo hará.

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