Textarea
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.
Met jQuery:
Code (php)
1
$(function(){ $('textarea').change() });
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>
Code (php)
1
2
3
4
2
3
4
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
});
var textareas = document.getElementsByTagName('textarea'); //alle textarea's
for(var i = 0; i < textareas.length; i++) autoExpand(textareas[i]); //kietel ze allemaal
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>';
}
?>
<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
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?
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.
Heb inmiddels de oplossing gevonden in PHP
De vraag was :
Quote:
Ik ben op zoek naar een java script dat automatisch de hoogte van textarea wijzigt naar de inhoud welke uit een database komt.
Je gevonden oplossing voegt <br /> voor \n en \r in om te voorkomen dat tekst die je eerder in een texarea hebt ingevoerd later als één lange zin op een webpagina wordt getoond in plaats van met <br /> regelomhalen.
Gewijzigd op 25/12/2018 18:18:17 door Adoptive Solution
Inderdaad ...
Quote:
Hoe zorg ik ervoor dat regelovergangen in een tekst uit een textarea, opgeslagen in een database, resulteren in regelovergangen in mijn HTML-document op het moment dat ik deze tekst (opnieuw) weergeef?
Het antwoord daarop is inderdaad:
Dit bereik je door regelovergangen (doorgaans een combinatie van \n (line feed) en/of \r (carriage return) - \r\n voor Windows, \n voor Unix, \r voor Mac, dus dit hangt ook af van het apparaat waarvandaan je de tekst invoert) om te zetten in HTML line-breaks (<br />). Dit is precies wat de functie nl2br() doet.
"Ik vraag me af of je de oplossing wel uitgetest hebt?"
Het werkt perfect