Avatar billede marrix Juniormester
15. juni 2004 - 09:36 Der er 30 kommentarer og
2 løsninger

Hurtig assistance efterlyses: Min tæller går i minus, hvorfor?

Hej eksperter

Det haster med lidt hjælp her – jeg skal aflevere denne opgave om 1½ time. HJÆLP!!!

Jeg har rodet med det her temmelig længe (og flere af jer har sikkert været involveret tidligere ;) ). Og jeg har stort set fået mine formularfelter med tæller mv. til at virke. Men jeg har et sidste pro-blem, som jeg simpelthen ikke kan gennemskue. Min tæller tillader tilsyneladende at gå i mi-nus – i hvert fald har brugeren mulighed for at indtaste udover de 160 karakterer, som er det max tilladte.

Her er funktionerne:

//Nægter et linjeskift
function evaluateKey()
{
    if (event.keyCode==13) 
        event.returnValue=false;
}

//Tilføjer "Vh " foran sætningen med navn/telefonnr. hvis feltet udfyldes
function senderAddChar(senderText)
{
    if (senderText.length == 1)
    {
        senderText = ("Vh " + senderText);
        document.smsForm.sendFrom.value = senderText;
    }
    countChars();
}

//Tæller (og nedtæller) antal karakterer m.v.
function countChars()
{
    var add = 0;
    //var charsLeft = 0;
    var msg = document.smsForm.smsMessage.value;   
    var sender = document.smsForm.sendFrom.value;
   
    //Mellemrum mellem smsMessage og sendFrom bliver ikke vist, men skal tælle for 1 tegn.
    if (sender.length == 0)
        add = 0;    
    else
        add = 1;
       
    //Beregner antal tegn tilbage
    charsLeft = maxChars-(msg.length+sender.length+add);
   
    //Indsætter resultatet af beregning herover i q-elementet "taeller"
    document.getElementById('taeller').innerHTML = charsLeft;
   
    //Hvis der er 0 (eller mindre) tegn tilbage (charsLeft) - return false.   
    if (charsLeft == 0 || charsLeft < 0)
        return false;
    else
        return true;
}

Af events der kalder ovenstående har jeg:

Mit textArea (name="smsMessage") med følgende events:
onkeydown="evaluateKey();" onkeyup="return countChars(this.form);"

Og et felt (name="sendFrom") med disse events:
onkeyup="senderAddChar(this.value);" onkeydown="senderAddChar(this.value);"

q-feltet er blot <q id="taeller" class="taeller">160</q>

Tælleren går i minus uanset om jeg indtaster i textArea (smsMessage) eller i tekstfeltet (send-From).

Hvorfor bliver indtastningen ikke stoppet af  ”if (charsLeft == 0 || charsLeft < 0) return fal-se;”? Er der nogen der kan knække den nød?

Venligst, marianne
Avatar billede fennec Nybegynder
15. juni 2004 - 09:40 #1
kan du ikke bare smide en maxlength på dine formfelter??

<input type="text" name="myTextField" maxlength="20">
Avatar billede yellow Nybegynder
15. juni 2004 - 09:44 #2
onkeyup="return countChars(this.form);"

return false på onkeyup canceller ikke din keydown event.
Du bliver nødt til at laver dit countChars check på onkeyup i stedet.

En anden lille detalje:
if (charsLeft == 0 || charsLeft < 0)
Du kan bare skrive:
if (charsLeft <= 0)
Avatar billede yellow Nybegynder
15. juni 2004 - 09:45 #3
sludder, på *onkeydown* i stedet...
Avatar billede fennec Nybegynder
15. juni 2004 - 09:48 #4
Havde ikke set at det var et textArea. Der kan man ikke sætte maxlength :(
Avatar billede marrix Juniormester
15. juni 2004 - 09:52 #5
>>yellow
Nu har jeg forsøgt den mulighed, som du nævner, men det giver så et andet problem. Hvis jeg copy-paster tekst ind i textArea, går tælleren i minus uanset hvad - det kan jeg leve med. Men desværre bliver feltet fuldstændig låst, og brugeren har ingen mulighed for at slette eller redigere i feltet. Hvad kan jeg så gøre for at ændre på dette?
marianne
Avatar billede marrix Juniormester
15. juni 2004 - 09:54 #6
...og feltet låser i øvrigt uanset hvad. Også selvom jeg kun skriver et tegn ad gangen (og ikke nødvendigvis copy-paster). Når tælleren når nul, er feltet låst for enhver yderligere indtastning.

Marianne
Avatar billede yellow Nybegynder
15. juni 2004 - 09:55 #7
Tilføj: onpaste="return false" i dit textarea
Avatar billede marrix Juniormester
15. juni 2004 - 09:57 #8
>>yellow
...ja, det er jo så desværre ikke nok, når feltet låser uanset hvad ...
Avatar billede yellow Nybegynder
15. juni 2004 - 09:59 #9
Kan du ikke lige smide en copy-paste af hele din side incl. inputfelterne. Så er det nemmere/hurtigere at teste.
Avatar billede marrix Juniormester
15. juni 2004 - 10:02 #10
...okay, det kommer her. Der er noget stylesheet på, men det behøver du nok ikke. Der er desuden lidt validering og andet, men den del skulle virke efter hensigten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Send en SMS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="side2notes.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
var maxChars = 160;

//VALIDERER FELTERNE I FORMULAREN INDEN AFSENDELSE:
function validSms()
{
    //Tjekker om der er indtastet mindst 8 tegn i mobiltelefonnummeret
    if(document.smsForm.sendTo.value.length < 8)
        return false;
    //Tjekker at feltet ikke er tomt
    if(document.smsForm.sendTo.value == "")
        return false;
   
    //Tjekker at hvert eneste indtastet tegn er et tal (0-9)
    for(i=0;i<document.smsForm.sendTo.value.length;i++)
    {
        if(document.smsForm.sendTo.value.charAt(i)<"0")
            return false;
    }
   
    if(document.smsForm.sendTo.value.charAt(i)>"9")
        return false;
   
    return true
}

function msgFilled()
{
    //Tjekker at meddelelsen har et indhold
    if(document.smsForm.smsMessage.value == "")
        return false;
    return true
}

//Tjekker om valideringen herover er opfyldt
function validForm()
{
    if(!validSms(document.smsForm.sendTo.value))
    {
        alert("Du skal indtaste et mobiltelefonnummer bestående af otte eller ti tal (ti tal for et udenlandsk mobilnummer)");
        document.smsForm.sendTo.focus();
        document.smsForm.sendTo.select();
        return false;
    }
   
    if(!msgFilled(document.smsForm.smsMessage.value))
    {
        alert("Du har ikke udfyldt feltet med beskeden til abonnenterne");   
        document.smsForm.smsMessage.focus();
        return false;
    }
   
    document.smsForm.submit();
    document.smsForm.sendTo.focus();
}
//SLUT PÅ VALIDERING

//Nægter et linjeskift
function evaluateKey()
{
    if (event.keyCode==13) 
        event.returnValue=false;
}

//Tilføjer "Vh " foran sætningen med navn/telefonnr. hvis feltet udfyldes
function senderAddChar(senderText)
{
    if (senderText.length == 1)
    {
        senderText = ("Vh " + senderText);
        document.smsForm.sendFrom.value = senderText;
    }
    countChars();
}

//Tæller (og nedtæller) antal karakterer m.v.
function countChars()
{
    var add = 0;
    //var charsLeft = 0;
    var msg = document.smsForm.smsMessage.value;   
    var sender = document.smsForm.sendFrom.value;
   
    //Mellemrum mellem smsMessage og sendFrom bliver ikke vist, men skal tælle for 1 tegn.
    if (sender.length == 0)
        add = 0;    
    else
        add = 1;
       
    //Beregner antal tegn tilbage
    charsLeft = maxChars-(msg.length+sender.length+add);
   
    //Indsætter resultatet af beregning herover i q-elementet "taeller"
    document.getElementById('taeller').innerHTML = charsLeft;
   
    //Hvis der er 0 (eller mindre) tegn tilbage (charsLeft) - return false.   
    if (charsLeft <= 0)
        return false;
    else
        return true;
}
</script>

</head>
<body onload="document.smsForm.sendTo.focus();document.smsForm.sendTo.select();countChars();">

<form name="smsForm" method="post" action=""  onsubmit="validForm();return false;" onreset="document.getElementById('taeller').innerHTML=160;">

<table width="620"  cellpadding="2" cellspacing="0" border="0" class="indramdette">

<tr>
<td colspan="2" class="titelcelle">
Send SMS
</td></tr>

<tr valign="top">
<td width="30%" valign="top">
Modtagers mobilnummer:
</td>
<td width="40%">
<input name="sendTo" type="text" size="15" maxlength="10" tabindex="1" class="venstreFelt">
</td>
</tr>

<tr valign="top">
<td>
Besked:
</td>
<td>
<textarea name="smsMessage" rows="5" cols="20" onkeydown="evaluateKey();return countChars(this.form);" onkeyup="return countChars(this.form);" tabindex="2" class="textArea"></textarea>
</td></tr>

<tr valign="top">
<td>
Eventuelt dit navn eller telefonnummer:
</td>
<td class="smallcelle">
<input name="sendFrom" id="sendFrom" type="text" size="30" tabindex="3"  class="venstreFelt" onkeyup="senderAddChar(this.value);" onkeydown="senderAddChar(this.value);">
Der er <q id="taeller" class="taeller">160</q> ud af 160 tegn tilbage.
</td></tr>

<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="Send" tabindex="4" class="sendknap">
<input type="reset" name="nulstil" value="Nulstil" tabindex="4" class="sendknap">
</td></tr>

</table>
</form>
</body>
</html>
Avatar billede fennec Nybegynder
15. juni 2004 - 10:03 #11
du kunne fange slet tasten og tillade den:

onkeydown="if(window.event.keyCode !=8){ gør noget...}"
Avatar billede yellow Nybegynder
15. juni 2004 - 10:06 #12
Jeps:
    if( event.keyCode == 8 ){return true;}
i toppen i din countChars funktion
Avatar billede marrix Juniormester
15. juni 2004 - 10:06 #13
>>fennec
Jeg er aldeles grøn udi det javascriptske - så hvordan (og hvor) skal jeg indsætte det du foreslår herover? Og hvad er det tanken, at jeg skal skrive i { gør noget...}?
marianne
Avatar billede marrix Juniormester
15. juni 2004 - 10:07 #14
...okay, det var da en god bid af svaret. Hvad med piletaster frem-tilbage-op-ned og delete-tasten? Kan de tilsvarende tilføjes?
Avatar billede yellow Nybegynder
15. juni 2004 - 10:08 #15
Ups, sludder igen.
Ændr:
  if (charsLeft <= 0)
til:
  if (charsLeft <= 0 && event.keyCode != 8 )
Avatar billede fennec Nybegynder
15. juni 2004 - 10:09 #16
smid det på dit tekstarea's onkeydown, også skal vi lige have begge slet taster med:


<textarea name="smsMessage" rows="5" cols="20" onkeydown="if(window.event.keyCode !=8 && window.event.keyCode !=46)
{evaluateKey();return countChars(this.form);}" onkeyup="return countChars(this.form);" tabindex="2" class="textArea"></textarea>

finder lige piletaster også....
Avatar billede fennec Nybegynder
15. juni 2004 - 10:11 #17
piletaster er fra 37-40

window.event.keyCode !=8 && window.event.keyCode !=46 && (window.event.keyCode >=37 && window.event.keyCode <=40 )
Avatar billede marrix Juniormester
15. juni 2004 - 10:11 #18
...okay, en anden mulighed for placering.
Har lige testet >>yellow's mulighed, og det udløser et andet problem. For når jeg har nået til nul, og går tilbage og sletter (backspace hedder den vist), så opdateres tælleren ikke...?
Avatar billede yellow Nybegynder
15. juni 2004 - 10:11 #19
ja, det med i toppen var noget sludder. Brug enten Fennec's eller min fra 15/06-2004 10:08:34
Avatar billede fennec Nybegynder
15. juni 2004 - 10:16 #20
Den anden virker ikke, men denne gør:

window.event.keyCode !=8 && window.event.keyCode !=46 && window.event.keyCode !=37 && window.event.keyCode !=38 && window.event.keyCode !=39 && window.event.keyCode !=40
Avatar billede fennec Nybegynder
15. juni 2004 - 10:19 #21
kan ikke forstå at den ikke opdater tælleren. Det er da countChars() funktionen som gør det, er det ikke??? Og den burde blive kørt på onkeyup uanset hvad.

ellers kan du jo gøre sådan:

<textarea name="smsMessage" rows="5" cols="20" onkeydown="if(window.event.keyCode !=8 && window.event.keyCode !=46 && window.event.keyCode !=37 && window.event.keyCode !=38 && window.event.keyCode !=39 && window.event.keyCode !=40)
{evaluateKey();}return countChars(this.form);" onkeyup="return countChars(this.form);" tabindex="2" class="textArea"></textarea>
Avatar billede marrix Juniormester
15. juni 2004 - 10:24 #22
...jamen efter jeg satte koderne for tjek af keyCode ned ved selve event'et, så virker det også fint. Det var da jeg i første omgang forsøgte mig med >>yellow's version, hvor jeg tilføjede det til funktionen i toppen af siden. Men det har yellow selv bemærket ikke fungerer.

Noget andet er så sendFrom feltet - skal det så have tilsvarende onkeydown-script hæftet på? Lige p.t. kan dette felt nemlig få tælleren til at gå i minus.
Avatar billede marrix Juniormester
15. juni 2004 - 10:33 #23
hmmmm, nu har jeg forsøgt at tilføje det her "onkeydown="if(window.event.keyCode !=8...." til sendFrom feltet - med "{senderAddChar(this.value);}" som funktionen der kaldes. Men sendFrom feltet kan stadig gå i nul, hvad der måske skyldes måden, hvorpå funktionen senderAddChar afvikles på, eller????

Feltet sendFrom skal jo tælle med i tælleren, og skal på samme måde som textArea stoppes når der er nul karakterer tilbage... Så hvordan gør jeg det nu?
Avatar billede marrix Juniormester
15. juni 2004 - 10:42 #24
Hjælp...jeg skal aflevere her omkring kl. 11 - og jeg kan ikke få sendFrom feltet til at stoppe ved nul. ????
Avatar billede fennec Nybegynder
15. juni 2004 - 10:47 #25
hvordan ser dit sendFrom element ud nu. hvilke actions/functions har du på den???
Avatar billede marrix Juniormester
15. juni 2004 - 10:56 #26
Hæhæ. Jeg tror jeg har fået det til at virke nu. Jeg tog indholdet af funktionen "addChar" og gjorde til en del af "countChars" (og slettede addChar). Så nu ser "countChar" således ud:

function countChars()
{
    var add = 0;
    var charsLeft = 0;
    var msg = document.smsForm.smsMessage.value;   
    var sender = document.smsForm.sendFrom.value;
   
    //Tilføjer "Vh " foran sætningen med navn/telefonnr. hvis feltet udfyldes   
    if (sender.length == 1)
    {
        sender = ("Vh " + sender);
        document.smsForm.sendFrom.value = sender;
    }
   
    //Mellemrum mellem smsMessage og sendFrom bliver ikke vist, men skal tælle for 1 tegn.
    if (sender.length == 0)
        add = 0;    
    else
        add = 1;
       
    //Beregner antal tegn tilbage
    charsLeft = maxChars-(msg.length+sender.length+add);
   
    //Indsætter resultatet af beregning herover i q-elementet "taeller"
    document.getElementById('taeller').innerHTML = charsLeft;
   
    //Hvis der er 0 (eller mindre) tegn tilbage (charsLeft) - return false.   
    if (charsLeft <= 0)
        return false;
    else
        return true;

...og så har jeg ændret tekstfeltets (sendFrom) events, så det virker som det I har foreslået:

onkeydown="if(window.event.keyCode !=8 && window.event.keyCode !=46 && window.event.keyCode !=37 && window.event.keyCode !=38 && window.event.keyCode !=39 && window.event.keyCode !=40){return countChars(this.form);}" onkeyup="return countChars(this.form);"

...så jeg tror det virker nu. Men tester lige et par gange mere for at være på den sikre side...
Avatar billede marrix Juniormester
15. juni 2004 - 12:56 #27
Så fik jeg afleveret - og det ser ud til at fungere fint nu. Hurra for det. Så kan jeg få >>fennec og >>yellow på banen med et formelt svar. Hvis det er i orden med jer, synes jeg I skal dele pointene, da I begge har leveret dele til det færdige script. Er det okay - at i deler fifty-fifty?

marianne
Avatar billede fennec Nybegynder
15. juni 2004 - 12:57 #28
helt i orden....
Avatar billede yellow Nybegynder
15. juni 2004 - 12:58 #29
fino
Avatar billede marrix Juniormester
15. juni 2004 - 13:10 #30
...jamen så tusind tak for den hurtige hjælp. Det har virkelig reddet mig her på falderebet... :)

NB! Kan I iøvrigt anbefale mig en rigtig god javascriptbog. Det skal være et opslagsværk med en masse god kodeeksempler. Nem at slå op i og med gode korte konkrete forklaringer (ok med engelsksproget). Der er masser af bøger af typen "javascript bible" - men jeg har svært ved at vurdere, om den ene er at foretrække frem for den anden...

Allertaknemmeligste hilsener
marianne
Avatar billede fennec Nybegynder
15. juni 2004 - 13:24 #31
Du kan finde mange gode på nettet hvis det var noget. Her kan jeg anbefale:

Netscape
http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/

og MSDN
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jslrfJScriptLanguageReference.asp

(MSDN omhandler JScript, men de fleste funktioner/metoder er ens med JavaScript. Jeg synes bare, det er hurtigere at finde funktionerne her)
Avatar billede marrix Juniormester
15. juni 2004 - 13:39 #32
...tak - et par gode steder, der straks er blevet føjet til min javascriptbogmærkemappe ;)

marianne
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester