Autogrow and shrink textarea (plain text)

[Alexander Bautz]

Here is an attempt to create a function to autosize a plain text multiline field when you type or paste text in it. Put this code in your Custom JS textarea in DFFS backend and change the “YourFieldNameHere” in the last line to match your field name:

function autoGrow(elm){
    // Set the height initially to 75px to calculate the scrollheight for shrinking the field
    jQuery(elm).height(75);
    var scrollHeight = elm.scrollHeight, innerHeight = jQuery(elm).innerHeight();
    if(scrollHeight > innerHeight){
        jQuery(elm).height(scrollHeight+20);
        spjs.dffs.resizeDlg();
    }
}
 
function initAutosize(fin){
    var tr = jQuery("#dffs_"+fin), elm = tr.find("textarea");
    elm.on("keyup",function(){
        autoGrow(elm.get(0));
    }).on("paste",function(){
        setTimeout(function(){
            autoGrow(elm.get(0));
        },100);
    }).css("overflow","hidden");
    // On load
    setTimeout(function(){
        if(!tr.is(":visible")){
            tr.show();
            setTimeout(function(){
                tr.hide();
            },0);
        }
        autoGrow(elm.get(0));
    },100);
}
 
initAutosize("YourFieldNameHere");

Alexander

[Author]

Posts