martinf/jquery.autosize.input

A jQuery plugin which automatically resizes the width of input fields according to the content, while typing.

jquery.autosize.input's Issues

Getting errors on compile

I'm new to TypeScript so I might be doing something blatantly wrong but I'm currently getting errors when I compile jquery.autosize.input.ts. I'm using TypeScript version 0.9.5 on Windows 8.1. Here's what I get:

$ tsc jquery.autosize.input.ts
jquery.autosize.input.ts(48,29): error TS1005: ';' expected.
jquery.autosize.input.ts(48,30): error TS1003: Identifier expected.

Removing the brackets, results in the following:

$ tsc jquery.autosize.input.ts
jquery.autosize.input.ts(51,10): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
jquery.autosize.input.ts(56,17): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
jquery.autosize.input.ts(96,10): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.
jquery.autosize.input.ts(99,10): error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

Very well then. Let's target ECMAScript 5:

$ tsc --target ES5 jquery.autosize.input.ts
jquery.d.ts(23,13): error TS2095: Could not find symbol 'bool'.
jquery.d.ts(25,13): error TS2095: Could not find symbol 'bool'.
jquery.d.ts(31,19): error TS2095: Could not find symbol 'bool'.
[...]
jquery.autosize.input.ts(35,5): error TS2011: Cannot convert 'JQuery' to 'string'.

What gives?

Visiting the page for the first time uses the standard width and does not resize

If the text-field already has content in it, it does not resize based on what is already in the text-field. Any suggestions?

Dom pollution

I use Autosize plugin to control size of an in-place input control. I create <input> dynamically each time user clicks on editable data.

Autosize dutifully creates a mirror <span> each time — and does not destroy it when an input is destroyed.

Here is a fiddle to reproduce the problem: http://jsfiddle.net/c1fxnezx/

I can contribute a fix if you'll tell me which way you want me to fix it.

can you add a license so we know how to use it

e.g. MIT would be great.

Object doesn't support this action

In IE8, it shows me an error. The error was "Object.defineProperty(..."

How to correct this.

autosize inputs when filled in by javascript

The inputs don't grow when filled in by javascript. Here is an example (sorry for the bad readability, I had to remove all code that prevents the actual display in this page):

.... script ...
$(document).ready(function() {
$(".autosizeInput").data('autosize-input' , {"space":8}).autosizeInput();
});

var addInputCounter = 0;
function addTextToInput()
{
    $('#autosizeInput1').val($('#autosizeInput1').val() + " --" + (++addInputCounter) + ": " + "text added here"); 
    return false;
}

.... page ....
input type="text" value="" id="autosizeInput1" class="autosizeInput" placeholder="Autosize"
a href="#" onClick="addTextToInput();"

Update input field width using any trigger

Is it possible to update the width of the input field apart from pressing 'keyup' or 'keydown' while focusing on the input field?

The thing is, I have an auto-complete plugin which allows you to select a suggestion. This suggestion then appears as text on the input field. The thing is that you have to 'focus' on the text field and then press a key for the width to 'update' to the length of the suggestion.

It is possible to run an 'update' function that I could bind with clicking on the auto-complete suggestion?

jsfiddle

does the jsfiddle work? it doesnt seem to work for me.

Add support for min/max

Would be nice to have more control over a max setting so things don't get out of control.

Input doesnt update when selecting and deleting a text

This bug happens when theres no placeholder, so the value is 'undefined'.

I have a solution for this. When the event is triggered, I put a empty string in case that the placeholder is undefined.

I will send you a pull request in a couple of hours

Could you publish this awesome plugin to npm :)

It would be really nice to be able to write 'npm install jQuery.Autosize.Input' to use this in my application :)

Autosizing not working for input value set by jquery (typeahead)

I'm using typeahead and the autosizing isn't working for values set by typeahead. Would reinitializing the plugin on the input after a selection is chosen be the best solution? Or is there an option for resizing when text is added outside keystrokes?

Text jiggles in Firefox when using space: 0

That is, text in the input field moves left and right by what looks like 1 pixel as I type in the input.

Here is a fiddle that reproduces the issue:

http://jsfiddle.net/se928j12/3/

Wouldn't it be nice to have the same functionality for the placeholder?

How to pass options when calling function.

I tried

$('input[type="text"]').autosizeInput( {space: 1} )

But it doesn't work.

I can't find an example - except for the one using data attributes - anywhere.

Thanks.

not working in wordpress

hello when i try to get this script work on wordpress i get error:

var Plugins;
(function (Plugins) {
var AutosizeInput = (function () {
function AutosizeInput(input, options) {
var _this = this;
Uncaught TypeError: Property '$' of object [object Object] is not a function
this._options = options;

i use
jQuery(document).ready(function($){
$(".some class").autosizeInput();
});

thanks for help

This is too perfect a solution to my problem. Please stop it.

j/k. thank you for this

Fit Parent Container Width

Hello Martin,

One of the use-case i was thinking of.. I have parent div of width:200px; and when I use autosize input ..it keep on growing beyond 200px. Any suggestions?
I was thinking of:

1. Find the parent element where the input is attached and get the width
2. pass maxWidth options to constructor

http://jsfiddle.net/mJMpw/1280/

Thanks

Bubble Up?

I have quite a few inputs in a project of mine that are added to the DOM based on certain events (click here to add a new field basically), and the DOM is injected by jQuery. All of those inputs contain data-elastic-input still, but they don't become elastic.

Near the top of $(document).ready, I have:

$("input[data-elastic-input]").autosizeInput();

And that doesn't catch it. I have also tried doing that same line on the event that the new DOM is added to catch it - even with a specific selector to the new inputs.

Thoughts on how I can resolve this?

Thanks!

Cannot make the input elemet size auto if it is added dynamically into the DOM

I add few fields dynamically by cloning into my DOM and I am not able to use the plugin features for these dynamic elements.

No destroy method?

Is there any possible way to have a destroy method?

How to update input before keyup?

Hello.

I have text input with empty value and I expect it should have min-width. But it decrease size only after key events.

Example

Unwanted horizontal scrollbar appears in FF and IE (jQuery 2.1.0)

Hi!

I was looking at your live example and this is just a little bug I've found:

I kept pressing one key for at least 5 seconds and suddenly a horizontal scrollbar appeared at the bottom of the frame...

Best Regards,
rb

doesn't work in IE 8 or IE 10

Great plug-in, works fine in FF and IE 9.

Add ability to set space option globally

Having the ability to set a global default for the space option would be a very big help in my case.

Thanks for the plugin though, just what I needed :-)

Doesn't work when new input is inserted

When the website is fully loaded and I insert a new input with jquery before() it doesn't reize