Home > Webentwicklung > Textfelder ohne Platzangst

Textfelder ohne Platzangst

Neuerding haben Texteingabe-Felder öfters Vergrößerungs Möglichkeiten damit sich der Nutzter mehr Platz zum Schreiben schaffen kann.

Das lässt sich aber auch ganz einfach automatisch mit ein wenig jquery Code lösen.
Dabei passt sich das Textfeld immer automatisch an die Menge des Textes an.

var TextareaHelper = {
    resize:function(element){
        if(!element.attr('orign_rows')){
            element.attr('orign_rows',element.attr('rows'));
        }
        var num_min_rows = parseInt(element.attr('orign_rows'));
        var rows = parseInt(element.attr('rows'));
        var cols = parseInt(element.attr('cols'));
        var str_text = element.attr('value');
        var num_rows = 1;
        if(str_text){
            var arr_rows = str_text.split("\n");
            num_rows = arr_rows.length;
            var i = 0;
            for(i=0;i<num_rows;i++){
                if(arr_rows[i]){
                    var text_row = arr_rows[i];
                    if(text_row.length >0 && text_row.length>cols){
                        num_rows += Math.floor(text_row.length/cols);
                    }
                }
            }
        }
        var num_rows_optimal = num_rows+2;
        if(num_rows_optimal<num_min_rows){
            num_rows_optimal = num_min_rows;
        }
        if(num_rows_optimal!=rows){
            element.attr('rows',num_rows_optimal);
        }
    }
};

Initialisiert wird das ganze zum Beispiel so:

$(document).ready(function() {
    $('textarea').keyup(function () {
        TextareaHelper.resize($(this));
    });
    $('textarea').each(function () {
        TextareaHelper.resize($(this));
    });
});

Natürlich muss dafür die jquery Bibliothek eingebunden sein.

Categories: Webentwicklung Tags:
  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks
Du musst Dich anmelden um einen Kommentar zu schreiben