martinf / jquery.autosize.input Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin which automatically resizes the width of input fields according to the content, while typing.
License: MIT License
A jQuery plugin which automatically resizes the width of input fields according to the content, while typing.
License: MIT License
I add few fields dynamically by cloning into my DOM and I am not able to use the plugin features for these dynamic elements.
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();"
When the website is fully loaded and I insert a new input with jquery before() it doesn't reize
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!
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?
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:
does the jsfiddle work? it doesnt seem to work for me.
Would be nice to have more control over a max setting so things don't get out of control.
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?
Hello.
I have text input with empty value and I expect it should have min-width. But it decrease size only after key events.
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:
http://jsfiddle.net/mJMpw/1280/
Thanks
Is there any possible way to have a destroy method?
Great plug-in, works fine in FF and IE 9.
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.
If the text-field already has content in it, it does not resize based on what is already in the text-field. Any suggestions?
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
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 :-)
In IE8, it shows me an error. The error was "Object.defineProperty(..."
How to correct this.
It would be really nice to be able to write 'npm install jQuery.Autosize.Input' to use this in my application :)
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.
j/k. thank you for this
e.g. MIT would be great.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.