javascript - indirecto - ¿Hay un complemento de autogrow jQuery para los campos de texto?

objeto directo definicion

Question

He encontrado varios complementos para autocrear un área de texto , pero no campos de entrada de texto. ¿Alguien sabe si existe alguno?

Answer 1

Aquí hay un complemento que hará lo que busca:

EDITAR : He arreglado el complemento según el comentario de Mathias. :)

Vea una demostración aquí: http://jsfiddle.net/rRHzY

El complemento:

(function($){

    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 70
        }, o);

        this.filter(''input:text'').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                val = '''',
                input = $(this),
                testSubject = $(''<tester/>'').css({
                    position: ''absolute'',
                    top: -9999,
                    left: -9999,
                    width: ''auto'',
                    fontSize: input.css(''fontSize''),
                    fontFamily: input.css(''fontFamily''),
                    fontWeight: input.css(''fontWeight''),
                    letterSpacing: input.css(''letterSpacing''),
                    whiteSpace: ''nowrap''
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, ''&amp;'').replace(//s/g,''&nbsp;'').replace(/</g, ''&lt;'').replace(/>/g, ''&gt;'');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                             || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind(''keyup keydown blur update'', check);

        });

        return this;

    };

})(jQuery);

Answer 2

Buen complemento, gracias! Sin embargo, cambié dos cosas que parecían funcionar mejor en mi proyecto.

1. Cambié la etiqueta TESTER a un DIV, para evitar la ''Llamada inesperada al método o acceso a la propiedad''. en IE8 (aunque su demostración sí funciona en IE8. ¿Hubo alguna razón particular para usar una etiqueta HTML personalizada?
2. Después de la declaración de vinculación cerca del final del código, agregué una llamada a check (), para cambiar el tamaño del cuadro de texto inmediatamente después de cargar la página, en caso de que el cuadro de texto ya tenga contenido al inicio.

Espero que esto ayude.

Answer 3

He creado un complemento para la entrada de tipo texto, que recrea este comportamiento. Tiene algunas otras características únicas. Puede ver un example y ver la documentation del complemento. La respuesta de @james tiene algunos problemas al pegar texto grande en la entrada. Para arreglarlo, he hecho algunas modificaciones a su código. Aquí hay una demo , para este ejemplo.

(function($){        
    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 200,
            minWidth: 1,
            comfortZone: 1,
          width: 1
        }, o);

        this.filter(''input:text'').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                maxWidth = o.maxWidth,
                val = '''',
                input = $(this),
                testSubject = $(''<tester/>'').css({
                    position: ''absolute'',
                    top: -9999,
                    left: -9999,
                    width: ''auto'',
                    fontSize: input.css(''fontSize''),
                    fontFamily: input.css(''fontFamily''),
                    fontWeight: input.css(''fontWeight''),
                    letterSpacing: input.css(''letterSpacing''),
                    whiteSpace: ''nowrap''
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, ''&amp;'').replace(//s/g,''&nbsp;'').replace(/</g, ''&lt;'').replace(/>/g, ''&gt;'');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                    newWidth = testerWidth + o.comfortZone,
                    currentWidth = input.width();

                   if (testerWidth < minWidth) {
                       newWidth = minWidth;
                   } else if (testerWidth > maxWidth) {
                       newWidth = maxWidth;
                   } 

                   input.width(newWidth + o.comfortZone);  
            };

            testSubject.insertAfter(input);

            $(this).bind(''input'', check);

        });

        return this;

    };

})(jQuery);

Answer 4

Lo suficientemente gracioso en el desbordamiento de IE: visible se toma muy en serio. Puede lograr este efecto aplicando el desbordamiento: visible en sus elementos de entrada. No estoy seguro de si existen trucos de CSS similares para los navegadores modernos.

Answer 5

Plugin impresionante James! Gracias. Agregué la sugerencia de verificación al final por JP aunque fue muy efectiva.

También agregué algunos cambios de mi parte. Quería establecer el tamaño de la entrada al tamaño máximo si el ancho modificado excedía el ancho máximo, así que agregué:

else if (widthexceeds){
    input.width(o.maxWidth);
}

debajo de if check para isValidWidthChange donde widthexceeds = newWidth > o.maxWidth

Answer 6

Si desea que el cuadro de texto crezca cuando la cadena dentro de él se extiende más allá de su ancho, tal vez algo así podría funcionar para usted ... Detecta el atributo de tamaño del cuadro de texto. Si la longitud de la cadena pasa por ese atributo, extiende el cuadro de texto a la longitud de la cadena en la tecla.

En la secuencia de comandos siguiente, "#test" es una ID de cuadro de texto.

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("#test").keyup(function(){
        if($("#test").attr("size") < $("#test").val().length){
            size = $("#test").val().length;
            $("#test").attr("size",size);
        }
    })
});
</script>

Answer 7

Solo quería compartir una pequeña mejora con el gran complemento de James. Agregue este código a la declaración de CSS para que el elemento del comprobador represente la sangría de texto:

textIndent: 0

Sin él, en algunas situaciones, el elemento del probador puede heredar inadvertidamente el guión de texto de otro lugar, lo que arroja el tamaño de la entrada.

Al igual que JP, también quería cambiar el tamaño de la entrada al tamaño correcto desde el principio, lo que hice de forma ligeramente diferente, encadenando "trigger (''keyup'')" a la llamada al método autoGrowInput, por ejemplo:

$(''#contact_form'').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger(''keyup'');

Como nota al margen, me registré en este sitio simplemente para comentar sobre la solución de James y estoy un poco molesto al descubrir que no puedo porque no tengo suficientes puntos de reputación para empezar. Lo siento si me he perdido algo, pero eso parece significar que tengo que publicar que este es un comentario sobre la pregunta principal en lugar de más apropiadamente sobre la solución de James.

Answer 8

Tengo un complemento jQuery en GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Utiliza el mismo enfoque que James answer pero tiene algunos de los cambios mencionados en los comentarios.

Puede ver un ejemplo en vivo aquí: http://jsfiddle.net/mJMpw/6/

Ejemplo:

<input type="text" value="" placeholder="Autosize" data-autosize-input=''{ "space": 40 }'' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

Simplemente use css para establecer el ancho mínimo / máximo y use una transición en el ancho si desea un efecto agradable.

Puede especificar el espacio / distancia hasta el final como el valor en notación json para el atributo data-autosize-input en el elemento de entrada.

Por supuesto, también puedes simplemente inicializarlo usando jQuery

$("selector").autosizeInput();

Answer 9

Yo también había reemplazado

$(this).bind(''keyup keydown blur update'', check)

a

$(this).bind(''keyup blur update'', check).bind(''keydown'', function() {
    setTimeout(check);
});

para redimensionar el campo justo después de que el navegador lo haya reescrito. Eso libraría al campo de algún parloteo.

Answer 10

input-autogrow un complemento llamado input-autogrow para resolver este problema en mis propios proyectos. Este complemento se basó originalmente en la respuesta de James, pero se ha mejorado de muchas maneras.

https://github.com/westonganger/input-autogrow

input-autogrow es un complemento para entradas de crecimiento automático. Este complemento es diferente de los demás, ya que la mayoría de las veces se dirige a las etiquetas de texto, esta biblioteca está dirigida a las etiquetas de entrada. Requiere una biblioteca DOM como jQuery, Zepto o cualquiera que admita los complementos $ .fn.

Aquí hay algunos ejemplos de uso.

/* Makes elements readonly if they already have the readonly attribute */
$(''input.autogrow'').inputAutogrow();

/* Manually trigger update */
$(''input.autogrow'').trigger(''autogrow'');
/* or */
$(''input.autogrow'').trigger(''change'');

/* Custom Options */
$(''input.autogrow'').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});

/* Remove autogrow from input */
$(''input.autogrow'').inputAutogrow(''destroy'');