JQuery - automatic text input (not textarea!)

Question

How to automatically resize input field = "text" using jQuery? I want it to be like 100px wide at the beginning, and then make it automatically expand as the user enters text ... is this possible?

Answer 1

Here is a plugin that will do what you need:

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 = $('<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,' ').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); 

EDIT: Found on: Is there a joguery autogrow plugin for text fields?

Answer 2

I don’t think there is an ideal solution to this problem, because you cannot determine the actual width of the text entered in the input element. It all depends on the font you are using, the zoom settings in the browser, etc.

However, if you can choose a font in which you can actually calculate the number of pixels that are in the text (this is the hardest part, but I think you can somehow evaluate it). You can use this to change the width of the input field.

  $('input').keyup(function () { // I'm assuming that 1 letter will expand the input by 10 pixels var oneLetterWidth = 10; // I'm also assuming that input will resize when at least five characters // are typed var minCharacters = 5; var len = $(this).val().length; if (len > minCharacters) { // increase width $(this).width(len * oneLetterWidth); } else { // restore minimal width; $(this).width(50); } }); 

Answer 3

( Edited: using the .text() method instead of .html() so that all formatting is correct.)

Hello, I do not know if you are still looking, but I came across this when I was looking for a script to do the same. Therefore, I hope that this will help anyone who is trying to do this, or something like that.

 function editing_key_press(e){ if(!e.which)editing_restore(this.parentNode); var text = $('<span>') .text($(this).val()) .appendTo(this.parentNode); var w = text.innerWidth(); text.remove(); $(this).width(w+10); } 

The logic of this code is to place the content on the page in the gap, and then get the width of this content and delete it. The problem I ran into was that I had to make it work with both keydown and the keyboard for it to work successfully.

Hope this helps, maybe not the way I only did jquery for a short amount of time.

thank

George

Answer 4

I have a jQuery plugin on GitHub: https://github.com/MartinF/jQuery.Autosize.Input

It uses the same approach as for answering a call, but has some changes mentioned in the comments.

Here you can see a live example: http://jsfiddle.net/mJMpw/6/

Example:

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

You just use css to set min / max-width and use the width transition if you want a nice effect.

You can specify a space / distance to the end as a value in json notation for the input-autosize-input attribute on the input element.

Of course you can just initialize it with jQuery

 $("selector").autosizeInput(); 

Answer 5

I used to capture the answer , but made the following changes:

• Between the isValidWidthChange and // Animate width settings:

   if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) { newWidth = o.maxWidth; isValidWidthChange = true; } 

  This way, the input will grow as large as you allowed when its contents are too large to fit the maximum width.

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

   // Auto-size when page first loads check(); 

Answer 6

See this jQuery plugin: https://github.com/padolsey/jQuery.fn.autoResizedel>

I just tested it with text fields and it works! Supports automatic increase of text fields, input [type = text] and input [type = password].

UPD. It seems that the original author removed the repo from github. The plugin has not been updated for a long time and turned out to be rather inconvenient. I can offer you only the best solution. I made a request to download this plugin sometime, so I have a copy of it in my github account, use it only if you want to improve it, it is not bulletproof !

In addition, I found that the ExtJS framework has an automatic implementation for text fields, see the configuration property to grow . Although it is not easy to cut out this small piece of logic from this structure, it can give you some good ideas regarding the approach.

Answer 7

By default, the width of the input signal is controlled by the size parameter, which for type="text" corresponds to the number of characters to be.

Since this is measured in characters, not pixels, the actual pixel size is controlled by the font used (fixed width).

Answer 8

I was just thinking the same thing. The text field must change it yourself, as the user inserts text into it. I have never used it, but I have an idea how to do it. Something like that:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> </head> <body> <table border="1"> <tr> <td> <span id="mySpan"> <span id="mySpan2"></span> <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;"> </span> </td> <td> sss </td> </tr> </table> </body> </html> 

Answer 9

Try this code:

 var newTextLength = Math.floor($("input#text).val() * .80); $("input#text").attr("size",newTextLength);