Ik ben op zoek naar een java script dat automatisch de hoogte van textarea wijzigt naar de inhoud welke uit een database komt.

Voor dit project kan dit varieren van 2 tot 200+ rows

Ik heb al vele scripts getest maar deze verandert alleen de hoogte als je zelf aan het invoeren bent , maar niet als deze uit de database komt.

Ik hoop dat het er is.
En als je op de onload van de pagina gewoon even de onchange voor de (alle) textarea('s) triggert (met zo'n "aanpassen bij veranderen" script actief)?

Met jQuery:
$(function(){ $('textarea').change() });
Mijn excuus ik ben echt een beginner, hoe moet ik dat doen.

ik gebruik nu het volgende script

<script>
//AUTO TEXT EREA EXTENDER MAAR NOG STEED ENTER NODIG
var autoExpand = function (field) {

// Reset field height
field.style.height = 'inherit';

// Get the computed styles for the element
var computed = window.getComputedStyle(field);

// Calculate the height
var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
+ parseInt(computed.getPropertyValue('padding-top'), 10)
+ field.scrollHeight
+ parseInt(computed.getPropertyValue('padding-bottom'), 10)
+ parseInt(computed.getPropertyValue('border-bottom-width'), 10);

field.style.height = height + 'px';

};

document.addEventListener('input', function (event) {
if (event.target.tagName.toLowerCase() !== 'textarea') return;
autoExpand(event.target);
}, false);

</script>

In de pagina
<textarea data-autoresize rows="2"></textarea>
Kan je aan de hand van het aantal regels ([php]explode[/php] op new-lines en [php]count[/php]) niet je de waarde van je rows-argument bepalen?
Werkt dit dan niet:

window.addEventListener('load',function(){ //na laden pagina
  var textareas = document.getElementsByTagName('textarea'); //alle textarea's
  for(var i = 0; i < textareas.length; i++) autoExpand(textareas[i]); //kietel ze allemaal
});
Hier mijn bijdrage om text uit een database in variable textareas te tonen :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
$(document).ready( function( ) {
	//alert('message');
	$("textarea").each( function( i, el ) {
		$(el).height( el.scrollHeight );
	});
});
</script>

<?php

$db = new mysqli('127.0.0.1:3307', 'user', 'pass', 'dbase');

$query = "SELECT pid , recipetxt FROM pix LIMIT 1,5;";
echo '<p>' . $query . '</p>';

if ( $result = $db->query( $query ) ) {
	echo '<form>';
	while ( $row = $result->fetch_object() ) {
		echo '<p>' . $row->pid . ' - <textarea rows="1" cols="65" >' . htmlspecialchars($row->recipetxt) . '</textarea></p>' . PHP_EOL;
	}
	echo '</form>';
} else {
	echo '<p>niks</p>';
}
?>


jquery script kwam ik hier tegen :

https://stackoverflow.com/questions/13085326/resize-text-area-to-fit-all-text-on-load-jquery
Thomas van den Heuvel op 15/12/2018 23:23:06

Vraag is, waarom zou je dit willen doen?

Lijkt me een terechte vraag.

+1
Zoals ik al vermelden ben ik het een beginner.

Ik heb de mogelijkheden van de volgende forum leden geprobeerd:
Rob Doemaarwat
Adoptive Solution
Maar kreeg ze niet aan de praat


- Ariën - ik heb geen idee hoe het te laten werken.

Is er niet een werkend script die ik in de website kan plakken,
waar ik daarna een beetje mee kan gaan kijken hoe het werkt?
Maar, waarom wil je dat?
Eigenlijk maakt het met een hele hoop regels straks niet uit of je moet scrollen. Of je scrollt in de textarea of in je browser zelf. Het klinkt meer een beetje dat eye-candy dan dat het echt functioneel zal zijn.

Als je vertelt wat je doel precies is, zijn er misschien wel andere ideeën die beter zijn.

En wat werkte er niet aan hun oplossingen? Ze zullen vast niet niet-werkende scripts hier plastsen, hoor.
we gebruiken het om notities of ingezonden informatie op te slaan.
Heb inmiddels de oplossing gevonden in PHP

<?php echo "<div>" . nl2br($message) . "</div><br>" ?

Reageren