Multidesk.be » Forums » Webdevelopment & -scripting » tekens tellen in een textarea

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Simon op zondag 6 januari 2008 om 17:01:47.
Simon's avatar
Multiviteit: 3742
Op mijn website wil ik graag een beperking leggen op het aantal tekens in een textarea. De bezoeker heeft wel de mogelijkheid om te zien hoeveel tekens hij nog over heeft.

Ik heb iets proberen te maken met Javascript, maar het probleem is dat ik daar echt niet veel van weet en het wil dus niet werken.

Het enige wat ik zie in het veld aantal_tekens is 180 (omdat dit als value ingegeven is :))

Javascript-code
CODE
  1. function textarea_tellen( veldnaam, telveld, limiet)
  2. {
  3.         //kijken of het aantal tekens in het textareaveld langer is dan de limiet
  4.         if ( veldnaam.value.length > limiet )
  5.         {
  6.                 //het aantal tekens is langer
  7.                 //we plaatsen een nieuwe string in het veld die het juist aantal tekens heeft
  8.                 veldnaam.value = veldnaam.value.substring( 0, limiet );
  9.         }
  10.         else
  11.         {
  12.                 //het aantal tekens is niet langer
  13.                 //we tellen hoeveel er precies inzitten en zeggen hoeveel tekens er nog over zijn
  14.                 //dit doen we door het aantal tekens van de limiet af te trekken
  15.                 //het resultaat plaatsen we in het telveldje
  16.                 telveld.value = limiet - veldnaam.value.length;
  17.         }
  18. }


HTML-code
CODE
  1. <textarea name="handtekening" id="handtekening" cols="23" rows="5"
  2. onKeyDown="textarea_tellen( document.profiel_bewerken.handtekening, document.profiel_bewerken.aantal_tekens, 180 )"
  3. onKeyUp="textarea_tellen( document.profiel_bewerken.handtekening, document.profiel_bewerken.aantal_tekens, 180 )">
  4. Dit is mijn handtekening
  5.  
  6. Groeten, Simon</textarea>
  7. <br />
  8. Nog <input type="text" name="aantal_tekens" size="3" maxlength="3" value="180" readonly /> tekens over!


Iemand die weet waar de fout(en) zouden kunnen zitten?
^ Reactie #1 geschreven door Martijn op zondag 6 januari 2008 om 22:01:15.
Martijn heeft nog geen avatar toegevoegd
Multiviteit: 13785
Beheerder
Onkeyup zou wel degelijk het event moeten zijn dat je nodig hebt (hoewel, hou er rekening mee dat dit niet in elke browser waterdicht is tegen copy/pasten van tekst).

Kijk eens na of:

  1. de functie zelf wordt aangeroepen
  2. indien de functie wordt aangeroepen, in welk deel van het if-statement je wanneer terecht komt.


Eenmaal dat in orde is, kan je beginnen met het corrigeren van de gegevens, bijvoorbeeld via substring. Kijk zeker na of alle variabelen wel gekend zijn en je dus geen null-waarden (of undefinedes) doorgeeft ;-).
Met vriendelijke groeten,
Martijn Wouters
^ Reactie #2 geschreven door thekid op maandag 7 januari 2008 om 14:21:10.
thekid's avatar
Multiviteit: 5273
Moderator
Hoi simon

op IE zal deze waarschijnlijk wel werken, 't is nl meer ie js dan algemenen javascript :)
In firefox zit je steeds met een handige optie: Extra -> foutconsole en deze toont de javascript error en op welke lijn deze plaatsvonden

voeg een id voor aantal_tekens toe bvb: idaantaltekens

wijzig in de javascript het aanroepen van de elementen:

CODE
  1.  
  2. function textarea_tellen(veldnaam, telveld, limiet)
  3. {
  4.   var tekstveld = document.getElementById(veldnaam);
  5.   var aantalTekens = document.getElementById(telveld);
  6.  
  7.   // indien de element niet bestaan, verlaat de functie
  8.   if (tekstveld == null || aantalTekens == null)
  9.      return;
  10.  
  11.   if (tekstveld.value.length > limiet)
  12.   {
  13.       tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
  14.   }
  15.   // aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
  16.   aantalTekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
  17. }
  18.  


en dan roep je de functie iets anders aan

CODE
  1.  
  2. <textarea name="handtekening" id="handtekening" cols="23" rows="5" onkeyup="textarea_tellen('handtekening', 'idaantaltekens', 180);">Dit is mijn handtekening
  3.  
  4. Groeten,Simon</textarea>
  5.  
  6. Nog <input type="text" name="aantal_tekens" size="3" maxlength"3" value="180" readonly id="idaantaltekens" /> tekens over!
  7. <!-- nog even js aanroepen om de startwaardes correct in te stellen ;) -->
  8. <script type="text/javascript">textarea_tellen('handtekening', 'idaantaltekens', 180);</script>
  9.  


en zo zou het moeten werken (op de substring functie eventueel na, omdat ik niet zeker ben dat deze ondersteunt is in standaard js)

*edit*
oversight corrected, en getest op firefox en ie, twerkt ;)
Deze tekst werd het laatst bewerkt voor 2.2 % door thekid op maandag 7 januari 2008 om 14:27:46.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #3 geschreven door SMG op maandag 7 januari 2008 om 19:11:53.
SMG's avatar
Multiviteit: 12000
Moderator

Randinformatie

Handig scriptje, zal ik ook wel gebruiken tx ;)
Werkt trouwens Fx, Opera, IE6/7 en Safari
Deze tekst werd het laatst bewerkt voor 27.74 % door SMG op maandag 7 januari 2008 om 19:12:58.
^ Reactie #4 geschreven door Simon op maandag 7 januari 2008 om 20:21:53.
Simon's avatar
Multiviteit: 3742
Bedankt thekid _O_,
het werkt ook perfect bij mij in alle browsers.

Van Javascript moet ik nog veel leren :D.
^ Reactie #5 geschreven door thekid op maandag 7 januari 2008 om 20:37:46.
thekid's avatar
Multiviteit: 5273
Moderator
no problemmo

javascript is btw niet zo moeilijk, er is maar 1 variable nl var die alle objecten kan bevatten :) Oproepen probeer je zoveel mogelijk te doen met getElementById('idElement') en steeds controle doen of het opgehaalde element null is of niet

voor de rest werken met de foutconsole en af en toe eens google raadplegen en het zal wel lukken, laat ons zeggen, als js op firefox werkt, zal het ook 99% zeker werken op de andere (1% voor IE en zijn speciale gevallen)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #6 geschreven door een gast op vrijdag 5 september 2008 om 17:19:37.
Het werkt goed, maar wat als ik twee van die tekstvelden onder elkaar wil hebben.
Dit deed ik, maar dan telt dat tweede veld de tekens niet .


<textarea name="handtekening" id="handtekening" cols="50" rows="3" onkeyup="textarea_tellen('handtekening', 'idaantaltekens', 450);">We hebben...</textarea>

Nog <input type="text" name="aantal_tekens" size="3" maxlength"3" value="450" readonly id="idaantaltekens" /> tekens over!
<!-- nog even js aanroepen om de startwaardes correct in te stellen ;) -->
<script type="text/javascript">textarea_tellen('handtekening', 'idaantaltekens', 450);</script> </p>
<p class="tekst">


<textarea name="zoeken" id="zoeken" cols="50" rows="3" onKeyUp="textarea_tellen('zoeken', 'idaantaltekens', 450);">We zoeken....</textarea>
Nog
<input type="text" name="aantal_tekens" size="3" maxlength"3" value="450" readonly id="idaantaltekens" />
tekens over!
<!-- nog even js aanroepen om de startwaardes correct in te stellen ;) -->
<script type="text/javascript">textarea_tellen('zoeken', 'idaantaltekens', 450);</script>


Moet ik dan ook iets in die eerste code veranderen, of zo?????

function textarea_tellen(veldnaam, telveld, limiet)
{
var tekstveld = document.getElementById(veldnaam);
var aantalTekens = document.getElementById(telveld);

// indien de element niet bestaan, verlaat de functie
if (tekstveld == null || aantalTekens == null)
return;

if (tekstveld.value.length > limiet)
{
tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
}
// aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
aantalTekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
}


^ Reactie #7 geschreven door Simon op vrijdag 5 september 2008 om 18:17:39.
Simon's avatar
Multiviteit: 3742
Het probleem zit in je tweede tekstveldje. Dit heeft ook het id idaantalteksn, net als je eerste. Maar in een HTML-pagina mag maar één element zitten met dat id. Je tweede telveldje zal dus een ander id moeten krijgen.
^ Reactie #8 geschreven door NightCreature op vrijdag 5 september 2008 om 18:55:09.
NightCreature's avatar
Multiviteit: 1196
MSc.
In elke programmeertaal/markup language and scripts moeten verschillende elementen een uniek ID hebben.
I need thought completion.
Shaders, een beetje vreemd maar wel lekker (voor de ogen dan he)
2.83Ghz Q9550 HD4850 512MiB 4GiB 1333Mhz DDR3 RAM
http://paulintheuk.blogspot.com
FE Programmer @ Codemasters (Front End)
^ Reactie #9 geschreven door een gast op zaterdag 6 september 2008 om 12:57:07.
Ok, dat heb ik gedaan. En jaaaaaaaaaah het werkt.
Maar, nu heb ik het volgende probleem. dat tweede veld telt het aantal tekens wel, maar je kunt gewoon door gaan nadat het aantal 0 (=nul) is berijkt.
Wat doe ik nu weer fout???????????''

function textarea_tellen(veldnaam, telveld, limiet)
{
var tekstveld = document.getElementById(veldnaam);
var aantalTekens = document.getElementById(telveld);

// indien de element niet bestaan, verlaat de functie
if (tekstveld == null || aantalTekens == null)
return;

if (tekstveld.value.length > limiet)
{
tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
}
// aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
aantalTekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
}
function textarea_tellen(veldnaam, telveld, limiet)
{
var tekstveld = document.getElementById(veldnaam);
var Tekens = document.getElementById(telveld);

// indien de element niet bestaan, verlaat de functie
if (tekstveld == null || Tekens == null)
return;

if (tekstveld.value.length > limiet)
{
tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
}
// aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
Tekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
}







<p class="tekst">
<textarea name="wie" id="wie" cols="49" rows="3" onkeyup="textarea_tellen('wie', 'idaantaltekens', 450);"></textarea>
Nog
<input type="text" name="aantal_tekens" size="3" maxlength"3" value="450" readonly id="idaantaltekens" />
tekens over!
<!-- nog even js aanroepen om de startwaardes correct in te stellen ;) -->
<script type="text/javascript">textarea_tellen('wie', 'idaantaltekens', 450);</script>
<br>
Geeft in maximaal 450 tekens aan wat en wie u zoekt. Hoe het volgens
u moet gaan. </p>
<p class="tekst">
<textarea name="zoeken" id="zoeken" cols="49" rows="3" onKeyUp="textarea_tellen('zoeken', 'idtekens', 450);"></textarea>
Nog
<input type="text" name="aantal_tekens" size="3" maxlength"3" value="450" readonly id="idtekens" />
tekens over!
<!-- nog even js aanroepen om de startwaardes correct in te stellen ;) -->
<script type="text/javascript">textarea_tellen('zoeken', 'idtekens', 450);</script>
<br>
Geeft in maximaal 450 tekens op om welke en hoeveel dieren het
gaat.</p>
<p class="tekst">


Wie helpt?
^ Reactie #10 geschreven door NightCreature op zaterdag 6 september 2008 om 15:17:36.
NightCreature's avatar
Multiviteit: 1196
MSc.
CODE
  1.  
  2. function textarea_tellen(veldnaam, telveld, limiet)
  3. {
  4.     var tekstveld = document.getElementById(veldnaam);
  5.     var aantalTekens = document.getElementById(telveld);
  6.  
  7.     // indien de element niet bestaan, verlaat de functie
  8.     if (tekstveld == null || aantalTekens == null)
  9.     return;
  10.  
  11.     if (tekstveld.value.length > limiet)
  12.     {
  13.         tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
  14.     }
  15.     // aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
  16.     aantalTekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
  17. }
  18.  
  19. function textarea_tellen(veldnaam, telveld, limiet)
  20. {
  21.     var tekstveld = document.getElementById(veldnaam);
  22.     var Tekens = document.getElementById(telveld);
  23.  
  24.     // indien de element niet bestaan, verlaat de functie
  25.     if (tekstveld == null || Tekens == null)
  26.     return;
  27.  
  28.     if (tekstveld.value.length > limiet)
  29.     {
  30.         tekstveld.value = tekstveld.value.substring(0, limiet); // weet wel niet of deze functie standaard js is :s
  31.     }
  32. // aangezien deze functie sowieso moet uitgevoerd worden mag deze buiten de if staan ;)
  33.     Tekens.value = (parseInt(limiet) - parseInt(tekstveld.value.length));
  34. }
  35.  

Allereerst heb ik ff je code tussen "Code" tags geplaatst zodat we de format van de code behouden. Ge-identeerde code leest een stuk makkelijker omdat alle {} op de zelfde posities staan en zorgt ervoor dat we makkelijk kunnen zien tot waar een functie loopt. Dus vlgende keer graag [ code ] plaats code [ /code ] gebruiken, natuurlijk zonder de extra spaties die ik er nu inzet.

Dan nu het probleem waarom definieer je twee keer dezelfde functie met slechts een variabele die van naam veranderd. Als je een functie maakt kun je deze gewoon hergebruiken als je geen gebruik maakt van variabelen die buiten de functie zijn gedefinieerd.

De reden waarom het tekstveld nog tekens accepteerd is omdat je wel kijkt of er nog tekens over zijn maar er geen code is die de keypress die the user geeft niet meer gebruikt als er geen tekens over zijn.

Ik ben geen java/javascript of website developer maar dat is het probleem dat ik zie, dus ik kan het verkeerd hebben.
I need thought completion.
Shaders, een beetje vreemd maar wel lekker (voor de ogen dan he)
2.83Ghz Q9550 HD4850 512MiB 4GiB 1333Mhz DDR3 RAM
http://paulintheuk.blogspot.com
FE Programmer @ Codemasters (Front End)
^ Reactie #11 geschreven door een gast op zaterdag 6 september 2008 om 16:49:43.
Niet zo boos tegen me doen hoor. Ik begin nog maar net.
Maar dank voor je hulp; door die dubbel code eruit te halen doet hij het nu gewoon.

En de volgende keer zal ik proberen die [CODE] tags te gebruiken, goed?
^ Reactie #12 geschreven door NightCreature op zaterdag 6 september 2008 om 18:27:13.
NightCreature's avatar
Multiviteit: 1196
MSc.
Was niet boos bedoeld meer een tip voor de volgende keer, code met layout is gewoon wat makkelijker om te lezen en ik begreep al dat je de tags niet kende dus wilde ze enkel voorstellen zodat je ze kent voor een andere keer.
Trouwens veel forums gebruiken de zelfde tags dus daar kan je ze ook gebruiken. Ok ik zie nu dat mijn tekst idd niet zo heel erg aardig was, mijn exuses daarvoor(argh ik kan geen NL meer typen)
I need thought completion.
Shaders, een beetje vreemd maar wel lekker (voor de ogen dan he)
2.83Ghz Q9550 HD4850 512MiB 4GiB 1333Mhz DDR3 RAM
http://paulintheuk.blogspot.com
FE Programmer @ Codemasters (Front End)
^ Reactie #13 geschreven door Martijn op maandag 8 september 2008 om 12:35:20.
Martijn heeft nog geen avatar toegevoegd
Multiviteit: 13785
Beheerder
Als je in het vervolg nog een nieuw onderwerp opent voor je vraag, zijn we helemaal tevree ;-).
Met vriendelijke groeten,
Martijn Wouters
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen