Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Overview

Summary

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Demo

Full documentation and a demo can be found at jacklmoore.com/autosize

Install via NPM

npm install autosize

Browser compatibility

Chrome Firefox IE Safari iOS Safari Android Opera Mini Windows Phone IE
yes yes 9 yes yes 4 ? 8.1

Usage

The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements.

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

Released under the MIT License

Comments
  • iOS 11.0.3, input box autosize is overlapping the keypad

    iOS 11.0.3, input box autosize is overlapping the keypad

    This issue is happening on iOS 11.0.3 version (all browsers). When you try to type something on the text input focus is going down and input box is pulled down.

    image12

    opened by enteeee 14
  • Prevents horizontal scroll

    Prevents horizontal scroll

    I have replaced elastic plugin with this one and then found horizontal scroll on the site caused by a hidden <textarea>, fixed by moving it further to the left.

    opened by firedev 14
  • box-sizing: border-box causes the height to be bigger than what it should

    box-sizing: border-box causes the height to be bigger than what it should

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

    opened by gustavohenke 13
  • Not working on wordpress

    Not working on wordpress

    I tryed this plugin,but seems him dosen't want work for me in wordpress.:D The jquery is a first srcipt and your script looks like this: http://pastebin.com/X7zbCYiP

    opened by NeoCsatornaja 11
  • Wrong height when using box-sizing: border-box

    Wrong height when using box-sizing: border-box

    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?

    opened by fjeldstad 11
  • Initial height is still wrong

    Initial height is still wrong

    my textarea height is 25px (given by css), but when autosize is fired the height becomes 121px. Have tried all three ways described on official site, but with no luck.

    opened by temirfe 10
  • Not initializing fine if line brea

    Not initializing fine if line brea

    Hi,

    It seems that height is not being calculated correctly if the text area contains line breaks, As soon as user focus the text area the height is set correctly

    opened by dpinart 10
  • When use some fonts autoresize changes height after type

    When use some fonts autoresize changes height after type

    Hello. I noticed that if I use some fonts (for example Roboto) then autoresize adjust height of input when I begin to type. Before I type (on page load) it sets height at 45px, for example, after I begin type it set to 47px.

    What can cause this weird behavior and how to fix it?

    opened by ChrisRobston 9
  • fix scroll issues for textarea on divs with overflow

    fix scroll issues for textarea on divs with overflow

    The commit fixes scroll issues with textarea which are on a div with overflow. autosize is changing scrollTop of the parent div during update after text height. In result textarea is jumping when using is typing something in the field. The problem is significant for bigger texts.

    opened by mst-avaleo 9
  • Prevent autosize manually?

    Prevent autosize manually?

    Is it possible to manually prevent autosize from triggering?

    I would do this in an if statement for certain cases (for example, I'm submitting the form on the enter key, and I don't want it to resize the box in that case...or display a modal saying 'you didn't enter anything' if the textarea is blank). Both cases I don't want autosize to fire.

    opened by gregblass 9
  • 52px height bug

    52px height bug

    jQuery autosize automatically sets my textarea to 52px:

    I want to make it to have a bit smaller height - 35px. Overwriting styles in any way does not help.

    Is there a way to avoid that problem?

    opened by pypetey 9
  • Conflicting with LastPass Browser Extension

    Conflicting with LastPass Browser Extension

    Not sure if it's something with my specific setup, but with Brave Browser and Lastpass plug-in / browser extension, I get a conflict.

    image

    I can focus and blur out of the textarea fine. It appears to only appear in the console log when I hit enter in the TextArea field.

    Very similar issue with this other project: https://github.com/mui/material-ui/issues/14860 Looks like the underlying cause is LastPast itself: https://community.logmein.com/t5/LastPass-Support-Discussions/onloadwff-js-Assertion-failed-Input-argument-is-not-an-HTML/m-p/246491

    Browser: Version 1.46.144 Chromium: 108.0.5359.128 (Official Build) (64-bit) Lastpass: 4.106.1

    opened by DaveHogan 0
  • Fix incorrect height calculation on stylized textareas when pasting

    Fix incorrect height calculation on stylized textareas when pasting

    Heya, I'm bad at writing clear explanations on the issue, so I provided a youtube video to show what's up and how it fixes it: https://www.youtube.com/watch?v=gO07e-Kxe18

    opened by Matsuuu 0
  • When the end of the line is reached, pressing the spacebar does not switch to a new line.

    When the end of the line is reached, pressing the spacebar does not switch to a new line.

    When the end of the line is reached, pressing the spacebar does not switch to a new line. Press the space key 100 times at the end of the line, it will save it, but when you press another key it will switch to the new line and you will see the space then.

    opened by m2sahin 0
  • Page scrolls up when typing (when being zoomed out in Safari)

    Page scrolls up when typing (when being zoomed out in Safari)

    Steps to reproduce:

    1. Open Demo (http://www.jacklmoore.com/autosize/) in Safari (15.2)
    2. Zoom out one step using cmd -
    3. Scroll down a little bit so there is room to scroll up
    4. Type in the first Textarea, the page starts scrolling up while typing

    Note: this only happens when zoomed out one step

    opened by receter 5
  • Adapter some phones for suddenly amplify the views and shrinking after.

    Adapter some phones for suddenly amplify the views and shrinking after.

    Recently, One user tell me that views will amplify suddenly and come to normal, so I test it for some phones, It can't repeat. The Phone model is Vivo s7e活力版, Then i have been find an answer to solve this problem, but it doesn't work. @Override public Resources getResources() { //需要升级到 v1.1.2 及以上版本才能使用 AutoSizeCompat AutoSizeCompat.autoConvertDensityOfGlobal((super.getResources());//如果没有自定义需求用这个方法 AutoSizeCompat.autoConvertDensity((super.getResources(), 667, false);//如果有自定义需求就用这个方法 return super.getResources(); }

    opened by Onperson 0
  • Bug: Plugin Sporadically Adds Disabled Vertical Scrollbar

    Bug: Plugin Sporadically Adds Disabled Vertical Scrollbar

    Bug found on Chrome and Edge - the plugin periodically adds a disabled vertical scrollbar which doesn't seem to be the intended behavior. This bug also seems to have appeared relatively recently - only in the last few months. image

    opened by missionbaymedia 0
Owner
Jack Moore
Long bio enthusiast
Jack Moore
Experimental tool inspired by Capsize, implemented in Solid JS. Generates x-height and cap-height CSS

Usage Those templates dependencies are maintained via pnpm via pnpm up -Lri. This is the reason you see a pnpm-lock.yaml. That being said, any package

Zaydek MG 2 Jul 5, 2022
Make text fit container, prevent overflow and underflow.

AutoTextSize Make text fit container, prevent overflow and underflow. The font size of the text is adjusted so that it precisely fills its container.

Sana Labs 10 Dec 30, 2022
Adjust the appearance and content of the booking pages to your brand and services.

Timerise open source booking page We are pleased to provide our booking page in open-source. We hope it will be useful in your use case. It can be emb

Timerise 14 Dec 12, 2022
Plugin for the Steam Deck, to adjust color settings, like saturation or gamma

vibrantDeck A Steam Deck plugin (for Decky Loader) to adjust screen saturation / vibrancy. Build instrutions Clone the repository to use as an example

libvibrant 48 Jan 8, 2023
🐘 instantly stand up full Postgres databases in your AVA tests

ava-postgres ava-postgres is a test fixture for AVA that provides you with nearly-instant access to a fresh Postgres database for every test. Installa

Seam 2 Dec 22, 2022
Bootstrap 5 spinner/loading/pending indicator for ,