Usando jQuery, ¿cómo puedo agregar un valor predeterminado de http:// en un campo de entrada que no puede ser eliminado, pero que todavía permite que usted escriba una dirección URL después?

Predeterminado: http://

Url: http://www.domain.name

  • Cómo agregar o no agregar valor predeterminado, que es la cuestión…
  • si el usuario no especifica http:// añadir si se especifica ignore
  • La puso al lado del campo de entrada, evitar la complejidad innecesaria?
  • Por qué jQuery? ¿Por qué no simplemente un fondo CSS y el relleno?
  • si usted está usando bootstrap salida entrada-grupos: getbootstrap.com/components/#input-groups
InformationsquelleAutor Mindtree | 2010-12-27

15 Comentarios

  1. 33

    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/

    • Esta solución es impresionante… gracias voy a usar…
    • Tenga en cuenta que aunque esto funciona para todos los eventos clave, que no impide que el usuario de arrastrar texto en el formulario con el ratón.
    • gran solución, gracias por publicar
    • Esto no funciona para el arrastre de texto en el formulario o la selección de la función autocompletar de la cadena.
    • Limpie N Solución Clara 🙂 ..
    • no funciona si se pega una cadena usando el botón derecho del ratón.

  2. 15

    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>
    • Esto funciona, pero es MUUUUY maldita sea confuso para el usuario!
    • ¿A qué te refieres? Por qué tendría que ser tan terriblemente confuso? Sin duda, sería menos confuso que tu sugerencia…
    • mi sugerencia – ya que JS – permite activamente indicar al usuario qué no puede editar lejos http:// (difícil el código en mi respuesta era demasiado perezoso para molestar). La suya en silencio no.
    • me gustaría que hubiera una manera de downvote un comentario.
    • Esto no funcionará si usted necesita el prefijo para ser enviado con un formulario, en el mismo campo.
  3. 13

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

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

    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.

    • Creo que esta es la mejor manera, si se quiere evitar el prefijo, mientras que la lectura de la entrada.
    • Esto no funcionará si usted necesita el prefijo para ser enviado con un formulario, en el mismo campo
    • de hecho, pero hasta ahora no he encontrado un caso en el que el guión en sí misma no puede ser ajustado. Este es por lejos una forma más elegante que no confundan al usuario, y se admite en casi todas partes.
    • Nunca hacer suposiciones acerca de la entrada del usuario. Si el prefijo es necesario se debe controlar/añadido en el lado del servidor de todos modos.
  4. 4

    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/

    • Si cambia la parte inferior de la frontera a ninguno en el grupo y de la frontera-top-color negro. Se ve bastante seemless en IE8 y FF4 así. Todavía funciona en chrome también. jsfiddle.net/G9Bsc/10
    • Gracias. En Chrome 11 Dev, me sale que falta un borde inferior, aunque. Es recuadro alrededor de la caja.
    • un monstruo feo
  5. 4

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

    • Funciona de maravilla!
    • El formulario.el prototipo.set_HttpPrefix = function (e) { if (e.de datos.$dirección url.val().longitud < 7) { e.de datos.$dirección url.val(‘http://’) } else if (e.de datos.$dirección url.val().indexOf(‘http://’) !== 0) { e.de datos.$dirección url.val(‘http://’ + String.fromCharCode(e.que)) } }
  6. 4

    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;
        }
    });
    • El javascript manera, en su forma simple, es francamente horrible. Claramente, se necesita mucho más para hacer que se comportan muy bien (sólo pruebe a pulsar la tecla de retroceso!) :). Aquí: jsfiddle.net/karim79/Qw7QY
    • ooh, sí, eso es bastante malo. Yo como que significaba esto como un punto de partida: que quieres es que para dar cuenta de la situación en la que el usuario se las arregla para entrar en algún texto antes de la http:// así.
    • justo lo suficiente. No me refiero a que sea un ataque a su respuesta. Es sólo que yo ya había probado exactamente eso 🙂 +1 para la primera sugerencia, de todos modos.
    • Esto es horriblemente roto para nada, a excepción de la situación en la que el usuario elimina el 100% de los contenidos – que se traducirá en cadenas como «ttp://lo«
    • oh, no se preocupe en absoluto, me alegro de que usted ha señalado las fallas: un montón de desarrolladores (incluido yo mismo) va a cortar-y-pegar el código en vez de leerlo, así que no-código de trabajo deben estar claramente marcados.
    • La mejor js método para calcular cuál es el valor que va a ser y si no empieza con http:// devuelve false en el evento. Traté de hacer, pero es demasiado trabajo para algo tan insignificante. Yo sólo tengo la tecla de retroceso tecla de trabajo con ninguna selección. jsbin.com/gigakoteja/1/edit?html,js,salida Incluso si usted maneja todos los casos, usted necesita para manejar los eventos del ratón. Puedo fácilmente omitir la aceptó responder con el ratón. Ojalá alguien hacer/hecho un plugin que se encarga de esta ampliamente.
    • En general estás buscando problemas si usted asume ningún tipo específico de dispositivo de entrada/método en la web (keyup sólo se aplica a la entrada de teclado, no los teclados en pantalla, copiar-pegar, arrastrar y soltar, voz…). input es el «general» evento diseñado para disparar si el valor de un <input> se cambia de ninguna manera, pero todavía no se dispara cuando se modifican con JS (por ejemplo, mediante una tecnología de asistencia de la extensión del navegador).

  7. 4

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

    • Funciona como un encanto!
  8. 3

    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>

  9. 2

    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.

  10. 1

    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)

  11. 1

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

    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.

  13. 0

    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>

  14. 0

    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)) 
        }
    }
  15. 0

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

Dejar respuesta

Please enter your comment!
Please enter your name here