jackmoore / autosize Goto Github PK
View Code? Open in Web Editor NEWAutosize is a small, stand-alone script to automatically adjust textarea height to fit text.
Home Page: http://www.jacklmoore.com/autosize/
License: MIT License
Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.
Home Page: http://www.jacklmoore.com/autosize/
License: MIT License
$(window).on('resize', function(){
gives an error under js console,here
$(window).resize(function(){
works for me (evein if it is set to false)
this to get adjust() under responsive layouts
(I wonder why I can't trigger it with 'focus blur etc..' events)
I experience the exact same behavior as described in the ticket 'Odd Height Miscalculation on Hidden Textarea'. Having multiple text areas on the page, those after the first one grow to ridiculous sizes and this goes for all browsers.
Now I read over the version log, and noticed you reworked it so only one mirror is used.
I then tried version 1.14, and everything works as it should, so sadly the update you did in 1.15 broke it.
See this js fiddle: http://jsfiddle.net/Dsb87/1/
Autosize doesn’t recognize textareas with wrap=off. Even if enabling the horizontal scrollbar explicitly in CSS it is disabled by Autosize. Instead, it adds an additional line so that the text would fit if wrapping were on.
The use case for such a textarea is where the line breaks matter (i.e. one option per line).
I didn't investigate this further, but the plugin doesn't seem to work on iOS 4.3.3 and iOS 4.2.1. You can click on the text area, the keyboard comes up, but then the cursor vanishes and you can't enter any text.
It works fine with iOS 5+.
I m getting one hidden line of content in text area.
But the content gets wrapped on users input, which shows the hidden line & properly wrapped words.
hey hi
how do i run the callback?
is it not:
$('.textarea').autosize(function(){ alert('howdy'); });
regards
Trying this out for the first time I can't get it to do anything. Some basic debugging shows that when adjust() is called ta.style.height is nothing. Any ideas?
Hey,
I'm using your plugin within Twitter Bootstrap, applying it in a textarea.input-block-level
, which has box-sizing: border-box
.
This causes the one-line height of the textarea to be bigger than what it should.
I commented the line 70 of the plugin code, than I get the correct initial height of my textarea.
Hi,
I really like your autosize script and I am using it in almost all projects. Recently I "tripped" over an issue and I can't solve it. When I do page in RTL, for example for Arabic the css direction:rtl conflicts autosize. Page gets very wide with horizontal scroll...
Here is example:
http://cdpn.io/ltyfa
If anyone could help, I would be very gratefull. Thanks!
I am using it with Twitter Bootstrap's span12
class and the resize sometimes happens well after I am a couple of characters into the next line. It should happen as soon as the word wraps on the next line.
If I set the textarea
to padding:0; border:0
it works. Alternatively, if I set the width in absolute px
it works as well.
UPDATE 1: Turns out even setting a fix width doesn't fix the issue. Only padding:0
and border:0
fixes it. The rounding error mentioned prior is not correct since I am on Chrome.
just to mention...
starting with textarea containing 1 line of text, and the following styles:
height: 17px;
line-height: 17px;
font-size: 14px;
box-sizing: content-box;
the plugin sets textarea height to 25px..
seems to affect webkit only (tested latest Chrome, Safari), Firefox is fine textarea height is as expected.
Hello,
I have discovered an issue with IE8. But only in pure IE8 and not IE10 using IE8 mode.
Giving the following example
<!DOCTYPE html>
<html>
<head>
<title>Textarea Autosize Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script src='jquery.autosize.js'></script>
<script>
$(function(){
$('.formTextArea').autosize();
});
</script>
</head>
<body>
<textarea class="formTextArea"></textarea>
<br/>
<textarea class="formTextArea"></textarea>
</body>
</html>
It doesn't resize, but if I refresh the page it starts to work. However, as soon I remove it works fine.
Thanks
Cheryl
Your code uses the propertychange
event in IE 7/8.
This has the side effect, that adjust()
is also called when css properties of the textarea are changed.
I tried something like that and it seems to work well:
// IE7 / IE8
ta[onpropertychange] = function(){
if(event.propertyName === 'value'){
adjust();
}
};
What's your thought on that?
Source: http://msdn.microsoft.com/en-us/library/ie/ms534352%28v=vs.85%29.aspx
Can you please look into this example, http://trajecsys.com/demo.zip. If textarea located inside table cell, it gain extra height and I can't figure out why.
Thanks
By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.
IE9 changed this, but not completely...
In the example the font-family defined for the div is used for the mirror, but not for original textarea.(where it is Courier New)
The solution can be to define the style for a textarea:
textarea {
font-family: inherit;
font-size: inherit;
}
Example:
<!DOCTYPE html><html>
<head>
<meta charset='utf-8'/>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Textarea Autosize Demo</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='jquery.autosize.js'></script>
<style>
#container {
font-family: "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
</style>
<script>
$(function(){
$('textarea').autosize();
});
</script>
</head>
<body>
<div id='container'>
<textarea cols='50' rows='5'></textarea>
</div>
</body>
</html>
There is an issue in chrome - when you start typing (for example at the beginning of the text) the cursor jumps to the end of the text.
Here is an example: http://jsfiddle.net/sr8xd/
Regards,
Elly
Chrome's content security policy in manifest version 2 doesn't allow autosize.js to run. It fails with the following error in the console:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'
The error can be traced to the check that tries to weed out old browser versions (specifically the setAttribute
line):
// For testing support in old FireFox
test.setAttribute(oninput, "return");
if ($.isFunction(test[oninput]) ...
Is there any other way that this test could be written? Is there a reason that the autosize plugin shouldn't run in Firefox 3-, and can that specific feature be tested for instead?
This is a great autosizer, but I think I've found an issue with it. I have multiple textareas on multiple accordion tabs. When I expand an accordion tab that contains an autosizing textarea, the initial size is huge, but once I start typing in the textarea, it shrinks to the proper size.
I did a bit of debugging and if I put this: alert(height); at line 125 of jquery.autosize.js (version 1.16.4), I do indeed get very large values for the height. Those values drop to proper size when I start typing. So it seems the height = mirror.scrollTop; line is returning an odd value for accordion tabs that are shrunk.
jquery auto-resize has a global leak.
I wrote a test case to show the leak. Simply download the html file on the following gist and open it in your favorite browser and you will see mocha finding a global leak when using the autosize() function.
Hi there,
I have looked for a way to make this plugin work with ajax pages. This works fine in all browsers I need to support except ie8. There the update that is triggered by on(resize) fails and gives a error.
Allso on larger applications the plugin leaves a lot of bindings on de window so I think e destroy function would be the best solution.
Please provide one.
First of all, this plugin awesome - thanks for creating it! :)
So when I enter text which grows the number of rows, and then remove the text via .val(''), the height does not reset. Is there a simple workaround to this?
Why don't you add a max-height (in rows or px) option. It is not always useful to have a huge textarea, but limit it's height with scrolling
Adding "lineHeight" to the copyStyle array seems to fix this.
When I focus a textarea (with some content) and hit enter a few times the first line scrolls up and isn't visible anymore.
(MSIE8, quirks mode, jQuery 1.9.1, jQuery UI 1.10.2, autosize downloaded today)
hi
i would think the plugin takes into account the padding of the textarea...in my case it seems like it's not, because adding padding gets my last line cut off, while removing the padding shows the text without being cut off. i'm on chrome. any ideas? regards
When the user presses the tab key, it will also go through the hidden textareas you create (the ones with the "autosizejs" class). The fix is simple: add a tabindex="-1" property to the textarea tag.
Hi!
I'm in doubt if I should post this issue here, looks like it is Chrome problem.
Anyway.
I'm applying plugin, then forcing it back to certain height and make resizable vertically with code:
$('textarea').autosize().css({'resize': 'vertical', 'height': '96px'});
And here comes strange things. If i resize textarea, then edit text I'll be able to resize it with mouse back to 96px.
But if I edit text so textarea grows, say to 200px and only after that I'll try to resize it , minimal height will be limited to 200+ px.
The same code in FF doesn't make any constraints, i can resize down till one row height.
When in FireFox, the height of the box doesn't correctly change when any CSS is applied to it. Incredibly frustrating. It resizes smaller so text gets cut off.
Sorry if this has been handled somewhere...
I want to experiment with using autosize when a textarea has focus, but then to return it to its previous height upon blur.
But I don't see a way to turn off autosize once you enable it for an element... is there a way?
If I set the textarea's line-height
to a larger value (e.g. 2em) than default. autosize seems not to consider it and still use the default line-height
value. This cause the textarea's height is always smaller than the height of the text inside (if the line-weight
is larger than the default), and some text can not show.
Adding "lineHeight"
to copyStyle
seems to solve this problem in my Firefox. Not sure about other browsers.
So my app consists of some comments that can be edited inline. The process I go through goes something like this. When a comment is created, I apply autosize() on to the hidden textarea used for editing. My problem is, is that when I show() the hidden textarea, the height of the textarea is miscalculated, and the result is a textarea that is far too big. Allow me to explain with images:
As you can see, right when a the user clicks the edit link, the height of the textarea is wayyyy to big. I'm curious as to why this is happening. I'm on the latest version of Chrome.
I have a textarea with one row. In chrome it just works fine, the textarea initially has one row. But in firefox the textarea starts with 2 rows by default. I have checked my css if some property is causing that but didn't find nothing related.
I'm using Firefox 15.0.1
Thanks
Why don't you add a min-height option.
Using min heigh option allows you to specify a minimum height that the object will have even if the field is empty.
Unfortunately, setting the min-height in my CSS, autosize does not respect it.
On FF 15.0.1 the height of the textarea is smaller than it should be when you append a new line. You can check the difference directly in the demo: http://www.jacklmoore.com/autosize
Thank you.
Any possibility for hosting on http://cdnjs.com/ ?
You should be able to add it just by opening a pull request: https://github.com/cdnjs/cdnjs
Hi again! Sorry to bother you again but I found that the mirrored textareas aren't being removed from the DOM once the original textareas are gone. I fixed this by binding each textarea to jQuery's remove event and then removing the mirror in there. I thought I would let you know :)
Add jQuery-autosize to http://cdnjs.com. Description on how to do this can be found here: https://github.com/cdnjs/cdnjs
Here is an example: http://jsfiddle.net/8bmpd/
This is expected to be a textarea with autosize with a Collapse/Expand button.
$('#ta').autosize();
$('#toggle').click(function (e) {
e.preventDefault();
var
if ($ta.hasClass('collapsed')) {
$ta.removeClass('collapsed');
$ta.stop().animate({height: $ta[0].scrollHeight}, 'fast');
} else {
$ta.addClass('collapsed');
$ta.stop().animate({height: 48}, 'fast');
}
It is working as expected in ff, chrome and IE9.
But in IE8 nothing happens when you click the "toggle" button. However if we set the height with .css() - it is working: http://jsfiddle.net/8bmpd/1/
Do you have any suggestions or workarounds on this matter?
I am using the autosize plugin with jQuery tabs on a page. I run the $('.autosize').autosize()
command on all textarea elements I want to resize at the time of the page load.
This works fine in IE9 but when I use IE7, the textareas in hidden divs get an unexpected large height and some textareas even expand below the height of the viewport.
Can you check this?
It's hard to explain, so we did a screencast showing the problem:
http://youtu.be/9Zws0zyI9jc
The page jumps/scrolls up and down as you input text into the textarea. In other cases weren't able to input text anymore after some characters
<audio>
elementYou can reproduce this with the iOS Simulator using the following jsFiddle:
http://fiddle.jshell.net/YkTUF/0/show/
The editable version: http://jsfiddle.net/YkTUF/
Opera has a bug where it uses the browser default line-height for non-visible textarea elements, regardless of user specified line-height. Is there a way to handle this plugin without line-height?
Simply add the CSS line height property to the copied styles and it will work for line heights other than 1em, too.
I tried using your plugin in an application using Twitter Bootrap, where textareas have box-sizing: border-box
by default, and noticed that the textarea was not resizing properly (it lagged behind a bit).
After fiddling around a bit, I saw this line in the adjust()
function:
mirror.style.width = $ta.css('width');
Doesn't this need to be changed in order to take horizontal padding into account when using border-box? Like this:
mirror.style.width = Math.max(0, $ta.width()) + "px"; // IE8 does not like negative widths
This seems to solve my issue. Haven't tested it thoroughly with other box-sizing values though. Any thoughts on this?
This is a nifty plugin but is there a way to set a max height to the textarea? It seems the css max-height attribute gets overwritten in this line:
ta.style.height = ta.style.maxHeight = mirror.scrollTop + 'px';
Is it possible to make it expand up to a certain height then scroll from there?
Thanks
If a page contain large number of textareas and I've applied autosize to all of em then there will be too much mirrors appended in the body.
What I suggest is to append the textarea only when textarea got focus. no need of mirror beside that.
here is what I am suggesting
$ta.focusin(function(){
$('body').append(mirror);
adjust();
});
$ta.focusout(function(){
$(mirror).remove();
});
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.