Inputfeld soll beim schreiben größer werden

[MsWord]

Hallo zusammen,

ich will in meinem System eine Pinnwand hinzufügen,
aber damit ich nicht ein zu keines oder zu großes Inputfeld habe wollte ich das so wie bei Facebook realisieren. Un zwar wenn der User eine neue Zeile anfängt, soll das Inputfeld dann auch um die Zeilenhöhe größer werden.

Hat jemand eine Idee wie ich das am besten mit JS oder jQuery lösen kann?

 

[javaDeveloper2011]

Hi,

also jedes mal wenn innerhalb der textarea Enter (Keycode 13) gedrückt wird, muss die textarea eine Zeile (row) mehr bekommen.
Hier mal ein Demo.

(Die textarea wird halt nicht kleiner, wenn man eine Zeile löscht, aber ich denke mal das muss auch nicht sein.?)

Gruß javaDeveloper2011

 

[MsWord]

Vielen Dank!

 

[MsWord]

Also die Lösung ist zwar noch nicht ganz perfekt, da ich nicht weiß, wie ich mit Javascript ermitteln kann ob die Zeile vor bzw. hinter dem Cursor Leer ist, damit man das auch wieder verkleinern kann.

 

[Mohag]

/**
*   Verwendung via jQuery
*/

var iLineheight = 20, iOrigHeight = 0, iLineWidth = 150; //angeben der zeichenlänge

$('#meintextfeld').onkeydown(function(keydata)
{
    var iHeight= $('#meintextfeld').css('height');
    if(iOrigHeight < 1) iOrigHeight = iHeight;
    if(((keydata.which) ? keydata.which : keydata.keyCode) === 13 || $('#meintextfeld').text().trim().length %= iLineWidth)
        ($('#meintextfeld').text().trim().length > 0) ? $('#meintextfeld').css('height', (iHeight+ iLineheight) + 'px') : $('#meintextfeld').css('height', iOrigHeight + 'px');
};


/**
*   JavaScript, im Falle es steht kein jQ zur Verfügung.
*/

<textarea onkeypress="javascript:function_lines(this);"></textarea>

var isenderOriginalHeight = 0, ilineheight = 20,iLineWidth = 150;

function function_lines(sender)
{
    if(sender.text.charCodeAt(sender.text.length - 1) === 13 || sender.text.trim().length %= iLineWidth)
    {
        if (senderOriginalHeight < 1) isenderOriginalHeight = sender.height;
        (sender.text.trim().length > 0) ? sender.style.height += ilineheight : sender.style.height = isenderOriginalHeight;
    }
}

So sollte eigentlich funktionieren..

MfG

PS: das jQuery muss natürlich in eine document.ready, sonst passiert da nix..

 

[Quaese]

@Mohag

Du hast bei der Variante ohne jQuery in der if-Bedingung bei senderOrginalHeight ein i vergessen:

if (senderOriginalHeight < 1)

Ciao
Quaese