Stretchy – Form element autosizing, the way it should be

stretchy

Stretchy – Live the vanilla JavaScript way of auto-resizing form elements how it should be! It’s a really small, easy-to-use and backward compatible Form-Resize library. It works at least in the Browsers Google Chrome, Mozilla Firefox 3.6, Internet Explorer 9, Opera and Apple Safari. Some Android Browsers are also supported! Just the Internet Explorer requires a small polyfill, due to its misreporting scrollWidth.

It works on each input type, but the default selector just grabs text, tel, email, url and non-typed fields. select and textarea elements are also supported, the last one can also be resized by its height!

Download the latest version of Stretchy as .ZIP or as .TAR package!

npm i stretchy --save

yarn add stretchy --save

Instructions

Stretchy comes up with a single and really small JavaScript file, which is available as minified version and also with a respective Source Map.

 

Load Stretchy

The JavaScript file can be located wherever you want, but we recommend to load it immediately after the started <body> tag. On modern browsers you can also use the asnyc attribute. This attribute loads the File asynchronous, which makes the location of this line more irrelevant.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/stretchy.min.js" async></script>
    </body>
</html>

 

Configure Stretchy

This library doesn’t offer any configuration API, it just allows to enable and disable it’s functionality and to add new elements on browsers they don’t support mutation observers. The Script tag can also include a data-filter attribute to modify the respective selector, used by Stretchy.

document.addEventListener("DOMContentLoaded", {
    Stretchy.active = true;
    
    // Manuelly Resize a Element
    Stretchy.resize(document.querySelector("input"));

    // Add new Elements
    Stretchy.resizeAll(document.querySelectorAll("input"));

    // Add all possible Elements
    Stretcky.resizeAll();

});

 

Leave a Reply

Top