kostenloser Webspace werbefrei: lima-city


Selbst erweiterbare Texteingabefelder?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    hyperedit

    hyperedit hat kostenlosen Webspace.

    Hey Leute,
    Habe das Problem, dass ich ein großes Textfeld (<textarea>) habe und wenn ein Zeilenumbruch kommt,
    der das Eingabefeld überschreiten würde, wir nur ein Scrollbalken geaddet.
    Ich weis schon wie ich den Scrollbalken wegbekomme(mit overflow) aber ich will das sich die größe des Eingabefeldes ändert(rows + 1)

    Das Problem bin ich mit PHP auf alle erdenklichen wege durchgegangen, aber nichts hat geholfen.
    Ich denke man kann es mit JS hinbekommen hab nur leider keine Ahnung wie.
    Danke schonmal im vorraus.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. <textarea id="q" rows="4" cols="80"></textarea>
    <script type="text/javascript">
        function stretchy(element) {
            var value= element.value;
            function update() {
                var h= element.scrollHeight;
                if (h > element.offsetHeight || h < element.offsetHeight-48)
                    element.style.height= (h+24)+'px';
            }
            element.onkeyup= update;
            setInterval(update, 1000);
            update();
        }
    
        stretchy(document.getElementById('q'));
    </script>

    Quelle: http://stackoverflow.com/a/2208802

    Der Code ist nicht mehr auf dem neusten Stand, besser gesagt, die Codestruktur ist heute einfach anders, aber funktionieren tut er alle Fälle. Den Interval und update() könntest du theoretisch entfernen.

    Mit PHP kann das auch nicht funktionieren, da hast du Recht.


    EDIT: Ich war mit der anderen Variante nicht zufrieden, das ist meine:

    <html>
    	<head>
    		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    		<script>
    			$(document).ready(function(){
    				$('#t').keypress(function(){
    					z = $('#t').val().split('\n').length;
    					r = $('#t').attr('rows');
    					if($('#t').attr('rows')-1 < z){
    						r++;
    						$('#t').attr('rows', r);
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<textarea id="t" rows="10"></textarea>
    	</body>
    </html>


    EDIT2: Meine selbstgeschriebene Variante berücksicht keine wrapped Lines. Das heisst, nur Zeilenumbrüche, die man selbst mit Enter gemacht hat. Deshalb hier ganz einfach mit einem jQuery Plugin:

    <html>
    	<head>
    		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    		<script src="https://raw.githubusercontent.com/jackmoore/autosize/master/jquery.autosize.min.js"></script>
    		<script type="text/javascript" >
    			$(document).ready(function(){
    			    $('#t').autosize();   
    			});
    		</script>
    		<style>
    		</style>
    	</head>
    	<body>
    		<textarea id="t" rows="10"></textarea>
    	</body>
    </html>


    Ich empfehle das zweite verlinkte Script zu downloaden und auf dem eigenen Server zu hosten. Livedemo

    Beitrag zuletzt geändert: 7.6.2014 1:09:21 von c143
  4. Autor dieses Themas

    hyperedit

    hyperedit hat kostenlosen Webspace.

    @c143
    Genau was ich gesucht habe vielen, vielen Dank :)
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!