[JS] Check Textarea op regellengte & hoeveelheid characters

[DieRooie]

Ik loop even behoorlijk vast. In een textarea wil ik de hoeveelheid characters beperken tot 220. So far so good. Maar, ik wil tevens dat er niet meer dan 20 characters op een regel staan en dat er maximaal 11 regels gevuld mogen worden. Woorden mogen niet afgebroken worden.

Dus als voorbeeld:
Webdesign en client side scripting fascineert me in grote mate, maar kan af en toe hoofdbrekens kosten en daarom ben ik aangewezen op Tweakers en de aanwezige programmeurs.

lines	characters	Text
1	20	Webdesign en client
2	15	side scripting
3	17	fascineert me in
4	20	grote mate, maar kan
5	11	af en toe
6	20	hoofdbrekens kosten
7	17	en daarom ben ik
8	14	aangewezen op
9	15	Tweakers en de
10	10	aanwezige
11	13	programmeurs.

Ik begrijp hoe ik het totaal aantal chracters kan limiteren tot 220 (onKeyPress (this.value.lenght) in combi met count), maar gezien de max van 20 characters per regel en de 11 regels totaal, kom ik daar feitelijk nooit aan.

Wie kan me helpen om die checks te maken voor 20 characters per regel zonder woordafbreking en maximaal 11 regels?

[OkkE]

Als je het alleen visueel wil: gebruik een monospaced typeface en zet de width op "20em".

Ik denk echter dat je het wil gebruiken in je back-end? In dat geval zou ik dit niet met Javascript oplossen maar met je server side taal opdelen.

Pak de volledige inhoud en splits op spaties. Je kunt dan door dat Array loop'en en de tekens per woord tellen. Zo kun je vrij eenvoudig het bovenstaande lijstje samenstellen.

[DieRooie]

OkkE schreef op dinsdag 10 januari 2012 @ 13:15:
Als je het alleen visueel wil: gebruik een monospaced typeface en zet de width op "20em".

Ik denk echter dat je het wil gebruiken in je back-end? In dat geval zou ik dit niet met Javascript oplossen maar met je server side taal opdelen.

Pak de volledige inhoud en splits op spaties. Je kunt dan door dat Array loop'en en de tekens per woord tellen. Zo kun je vrij eenvoudig het bovenstaande lijstje samenstellen.

Misschien een beetje verwarrend door mijn voorbeeldtabel, maar het gaat me er juist om dat mensen terwijl ze aan het typen zijn een melding krijgen dat ze aan de maximale hoeveelheid regels en/of karakters zitten en niet meer verder kunnen tikken. Is Javascript dan niet handiger?

[OkkE]

Dan is inderdaad Javascript beter, kan je op de zelfde manier doen als mijn idee met server-side. Maar ik blijf het een beetje een vreemde wens vinden; kan je uitleggen waarom je dit zo wil?

[PdeBie]

en wat nou als ik eerst 10x op enter druk en de 11e regel begin te typen. Heb ik dan nog maar 20 karakters van de 220 over?

Ik snap even de achterliggende gedachte niet.

[DieRooie]

Verdere uitleg:
De tekst van de textarea wordt automatisch uitgeprint op een brief. Ik heb op een brief de ruimte van exact 11 regels tekst. Of de regel nu volledig gevuld is met 20 karakters of niet. Sommige regels bevatten dus 13 karakters, andere 20. Aangezien het 11 regels zijn kan het totaal aantal tekens nooit hoger zijn dan 220.

Maar omdat woorden niet halverwege afgebroken mogen worden schuiven ze op naar de volgende regel. En dus zijn het logischerwije altijd minder dan 220 tekens. Enters worden niet toegstaan door het systeem. Was dat wel het geval dan is het correct dat iemand 10 regels niets invult en een regel met 20 tekens.

[RobIII]

DieRooie schreef op dinsdag 10 januari 2012 @ 21:58:
Enters worden niet toegstaan door het systeem.

En hoe ga je dan naar een volgende regel als, zeg, je adres-regel maar 15 tekens bevat? Moet je dan 5 spaties invoeren?

Wat ik zou doen is 't probleem eens in pseudo-code opschrijven en dan omgieten naar echte code:

code:

function checkText(tb as textbox) {
  maxlines = 11
  maxcharsperline = 20

  lines = tb.text.split("\r\n")
  status = array()

  if (lines.length > 20)
    status.push("Too many lines!")
  for (i = 0 .. min(lines.length, maxlines))
    if (lines[i].length > maxcharsperline)
      status.push("Line $i is too long!")
  return status
}

Daarna zet je in de onkeyup/down/whatever een functie die checkText aanroept en in een divje de status uitpoept. In de form's onsubmit roep je diezelfde checkText aan en kijk je of je een array van 0 elementen (== geen fouten) terug krijgt.

En last-but-not-least: Uiteraard zorg je server-side dan nog een keer (met eenzelfde checkText functie, maar dan in PHP of whatever) dat de tekst die je middels $_POST binnenkrijgt voldoet aan je eisen.

[ Voor 65% gewijzigd door RobIII op 10-01-2012 23:36 ]