Existe um plugin de crescimento automático do jQuery para campos de texto?

Eu encontrei vários plugins para autogrowing um textarea , mas não campos de texto de input. Alguém sabe se existe algum?

   

    Aqui está um plugin que fará o que você está procurando:

    EDIT : eu corrigi o plugin de acordo com o comentário de Mathias. 🙂

    Veja uma demonstração aqui: http://jsfiddle.net/rRHzY

    O plugin:

    (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 = $('').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, '&').replace(/\s/g,' ').replace(//g, '>'); 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); 

    Eu tenho um plugin jQuery no GitHub: https://github.com/MartinF/jQuery.Autosize.Input

    Ele usa a mesma abordagem que James, mas tem algumas das mudanças mencionadas nos comentários.

    Você pode ver um exemplo ao vivo aqui: http://jsfiddle.net/mJMpw/6/

    Exemplo:

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

    Você apenas usa css para definir min / max-width e usar uma transição na largura se quiser um efeito legal.

    Você pode especificar o espaço / distância até o final como o valor na notação json para o atributo de input de autossensibilidade de dados no elemento de input.

    Claro que você também pode apenas inicializá-lo usando jQuery

     $("selector").autosizeInput(); 

    Bom plugin, obrigado! Eu mudei duas coisas que pareciam funcionar melhor no meu projeto.

    1. Eu mudei a tag TESTER para um DIV, para evitar “Chamada Inesperada para access ao método ou propriedade”. no IE8 (mesmo que sua demo funcione no IE8. Houve uma razão específica para usar uma tag HTML personalizada?
    2. Após a instrução bind perto do final do código, adicionei uma chamada a check (), para resize a checkbox de texto imediatamente após o carregamento da página, caso a checkbox de texto já tenha conteúdo nela na boot.

    Espero que isto ajude.

    só queria compartilhar uma pequena melhoria para o ótimo plugin do James. Adicione este código à declaração CSS do elemento tester para contabilizar o recuo de texto:

     textIndent: 0 

    Sem ele, em algumas situações, o elemento testador pode inadvertidamente herdar o recuo de texto de outro lugar, descartando assim o tamanho da input.

    Como o JP, eu também queria resize a input para o tamanho correto desde o começo, o que fiz de maneira ligeiramente diferente, encadeando “trigger (‘keyup’)” para a chamada do método autoGrowInput, por exemplo:

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

    Como uma nota lateral, eu me inscrevi neste site apenas para comentar sobre a solução de James e estou um pouco chateado ao descobrir que não posso, porque eu não tenho pontos de reputação suficientes para começar. Desculpe se eu perdi alguma coisa, mas isso parece significar que eu tenho que postar isso é um comentário sobre a questão principal em vez de mais apropriadamente na solução de James.

    Eu também troquei

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

    para

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

    para obter o campo redimensionado logo após ser renderizado novamente pelo navegador. Livraria o campo de algumas conversas.

    Eu criei um plugin para a input de texto tipo, que recria esse comportamento. Tem alguns outros resources exclusivos. Você pode ver um exemplo e ver a documentação do plugin. @james answer tem alguns problemas ao colar texto grande na input. Para corrigi-lo, fiz algumas modificações no código dele. Aqui está uma demonstração , para este exemplo.

     (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 = $('').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, '&').replace(/\s/g,' ').replace(//g, '>'); 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); 

    Se você quiser que a checkbox de texto cresça quando a seqüência de caracteres se estender além da largura, talvez algo como isso funcione para você … Ele detecta o atributo de tamanho da checkbox de texto. Se o comprimento da string ultrapassar esse atributo, ele estenderá a checkbox de texto até o tamanho da string na keyup.

    No script abaixo, “#test” é um ID de checkbox de texto.

      

    Engraçado o suficiente no IE estouro: visível é levado muito a sério. Você pode conseguir esse efeito aplicando overflow: visible em seus elementos de input. Não tenho certeza se existem truques CSS semelhantes para navegadores modernos.

    Plugin Awsome James! Obrigado. Eu adicionei a sugestão de verificação no final por JP embora muito eficaz.

    Também adicionei algumas alterações da minha parte. Eu queria definir o tamanho da input para o tamanho máximo se a largura alterada excedesse o maxWidth, então adicionei:

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

    abaixo da verificação if para isValidWidthChange em que widthexceeds = newWidth > o.maxWidth

    Eu criei um plugin chamado input-autogrow para resolver este problema para meus próprios projetos. Este plugin foi originalmente baseado na resposta de James, mas foi melhorado de várias maneiras.

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

    input-autogrow é um plugin para inputs de crescimento automático. Esse plug-in é diferente dos outros, porque geralmente a maioria das tags de área de texto de destino é destinada a essa biblioteca. Requer uma biblioteca DOM como jQuery, Zepto ou qualquer outra que suporte plugins $ .fn.

    Aqui estão alguns exemplos 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');