jackmoore / autosize Goto Github PK

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)

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.

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

$(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)

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.

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).

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.

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

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:

1. Page renders with hidden textarea, and autosize() is applied to it.

1. User clicks on edit to show textarea.

1. User does a 'keyup'.

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.

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.

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.

If you type some long text in the textarea in IE8 and delete a few lines with backspace, the textarea size does not update.

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.

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?

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.

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?

Add jQuery-autosize to http://cdnjs.com. Description on how to do this can be found here: https://github.com/cdnjs/cdnjs

The Problem

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

Reproduce

• This happens only in iOS
• There is more than 1 textarea
• Only if there is an <audio> element

You 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/

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.

See the image below:

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.

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?

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.

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 $ta = $('#ta');
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?

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

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.

Adding "lineHeight" to the copyStyle array seems to fix this.

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+.

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!

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?

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 :)

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.

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?

Hi, Jack!

I am trying to use autosize plugin, but in FireFox 12 I have situation like this:

As you can see one line is hidden. Can you help me to fix this?

Sincerely,
Anatoli

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

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

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.

Global Leak Testcase

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

For each of textareas that are in a page, the plugin is appending divs to the bottom of body.
It should be improved to a cleaner way.

hey hi
how do i run the callback?
is it not:
$('.textarea').autosize(function(){ alert('howdy'); });
regards

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

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

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

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.

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

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'&gt;&lt;/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>

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?

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.