Søg
Avatar billede kimborg Nybegynder
12. december 2006 - 11:08 Der er 18 kommentarer og
1 løsning

Tjek om caps lock er aktiveret

Hej, jeg skal bruge et script, som fortæller brugeren at caps lock er aktiveret, men jeg er ikke særlig skarp i javascript. Nogle som kan hjælpe??
Avatar billede madeindk Nybegynder
12. december 2006 - 12:06 #1
Hej, jeg har fundet dette script til dig :-)

<script language="JavaScript">

function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps lock er slået tl';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;

    // Netscape 4
    } else if ( document.layers ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    // Netscape 6
    } else if ( document.getElementById ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    }

    // Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
        alert( myMsg );

    // Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {
        alert( myMsg );

    }
}

</script>

På det felt du ønsker tjekke sætte på dette:  onKeyPress="checkCapsLock(event);"
Avatar billede kimborg Nybegynder
12. december 2006 - 12:37 #2
Hmm... det ser jo fint ud, men hvordan får jeg teksten frem ved siden af input-boksen istedet for en alert??

<input type="text" size="30" onKeyPress="checkCapsLock(event);">
Avatar billede madeindk Nybegynder
12. december 2006 - 12:45 #3
Det kigger jeg lige på - giv mig 5 min :-)
Avatar billede olebole Juniormester
12. december 2006 - 12:52 #4
<ole>

Ændringer:

checkCapsLock(this, event);

- og:

function checkCapsLock( oElm, e ) {

- og:

alert( myMsg );
- skal være:
oElm.setAttribute( "value", myMsg );

/mvh
</bole>
Avatar billede madeindk Nybegynder
12. december 2006 - 12:56 #5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

function view(targetId){
if (document.getElementById){
        target = document.getElementById( targetId );
          if (target.style.display == "none"){
              target.style.display = "";
              } else {
            target.style.display = "none";
          }
    }
}

function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps lock er slået tl';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;

   

    // Netscape 4
    } else if ( document.layers ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    // Netscape 6
    } else if ( document.getElementById ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;
    }
   
   

    // Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
       
        document.getElementById('capslock').style.display = 'block';
       
    // Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {

        document.getElementById('capslock').style.display = 'none';
       
    }
}

</script>

<input type="text" size="30" onKeyPress="checkCapsLock(event);"> <b id="capslock" style="display:none;">Caps lock</b>

</body>
</html>
Avatar billede olebole Juniormester
12. december 2006 - 12:56 #6
Sorry ... ved siden af input-feltet - ikke i feltet  ;oD

<input type="text" size="30" onKeyPress="checkCapsLock('gnu', event);">
<span id="gnu">&nbsp;</span>

function checkCapsLock( sID, e ) {

- og:

alert( myMsg );
- skal være:
document.getElementById(sID).firstChild.nodeValue = myMsg;
Avatar billede olebole Juniormester
12. december 2006 - 12:57 #7
madeindk >> Sådan kan man også gøre det - men husk et validt script-tag  ;o)
    <script type="text/JavaScript">
Avatar billede madeindk Nybegynder
12. december 2006 - 12:59 #8
Du har ret Ole - jeg retter lige lidt i det ;-)
Avatar billede madeindk Nybegynder
12. december 2006 - 13:03 #9
<code>

<script language="javascript">

function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps lock er slået til...';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;

    // Netscape 4
    } else if ( document.layers ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    // Netscape 6
    } else if ( document.getElementById ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;
    }
   
    // Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
       
        document.getElementById('capslock').style.display = 'block';
        document.getElementById('capslock').innerHTML = myMsg;
       
    // Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {

        document.getElementById('capslock').style.display = 'none';
        document.getElementById('capslock').innerHTML = myMsg;
       
    }
}

</script>

<input type="text" size="30" onKeyPress="checkCapsLock(event);">&nbsp;<span id="capslock">&nbsp;</span>

</code>

Ole du er også velkommen til at smide et svar ;-)
Avatar billede olebole Juniormester
12. december 2006 - 13:24 #10
Husk et validt script-tag  ;o)

innerHTML har aldrig været valid i nogen standard - og er desuden umulig at bruge under ægte XHTML (når det engang bliver aktuelt). Derfor brugte jeg:
    document.getElementById('capslock').firstChild.nodeValue = myMsg;

- som er valid JS-DOM kode  ;o)
Avatar billede olebole Juniormester
12. december 2006 - 13:25 #11
- og nej tak til points, det var kun smårettelser  ;o)
Avatar billede madeindk Nybegynder
12. december 2006 - 13:25 #12
Ok, så lad os bruge det :-)

Har bare aldrig oplevet innerHTML ikke virkede i hverken IE6, IE7 eller FF 1 eller 2.
Avatar billede kimborg Nybegynder
12. december 2006 - 13:33 #13
Tusind tak, men hvordan får jeg teksten "Caps lock er slået til" rykket op lige efter input-feltet og kan teksten forsvinde igen når man fjerner caps lock??

Sådan ser koden ud indtil videre:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<script language="javascript">

function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps lock er slået til!';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;

    // Netscape 4
    } else if ( document.layers ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    // Netscape 6
    } else if ( document.getElementById ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;
    }
   
    // Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
       
        document.getElementById('capslock').style.display = 'block';
        document.getElementById('capslock').firstChild.nodeValue = myMsg;
       
    // Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {

        document.getElementById('capslock').style.display = 'none';
        document.getElementById('capslock').firstChild.nodeValue = myMsg;
       
    }
}

</script>

<input type="text" size="30" onKeyPress="checkCapsLock(event);">&nbsp;<span id="capslock">&nbsp;</span>

</body>
</html>
Avatar billede olebole Juniormester
12. december 2006 - 13:35 #14
madeindk >> Jamen, den virker skam også i alle de nævnte browsere - men det betyder ikke, den er valid. Når ægte XHTML bliver en realitet (i version 2.0) og når browserne engang begynder at understøtte standarden, bliver det umuligt at bruge innerHTML - som i øvrigt strider lodret mod hele W3C's DOM-tanke  :)

XHTML er hverken understøttet i IE6 eller 7 - og FF understøtter XHTML mere eller mindre buggy. Bl.a. derfor er der utroligt få, der nogensinde har skrevet et XHTML-dokument, der faktisk parses og behandles som ægte XHTML (altså af browserens XML-fortolker)  ;o)
Avatar billede olebole Juniormester
12. december 2006 - 13:36 #15
kimborg >> Skidt lige:
    <script language="javascript">

- ud med:
    <script type="text/JavaScript">

;o)
Avatar billede madeindk Nybegynder
12. december 2006 - 13:38 #16
Ok Ole, så ved jeg det :-) Jeg har sat det ind rettelse ind.

<code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>

<script type="text/JavaScript">

function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps lock er slået til!';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;

    // Netscape 4
    } else if ( document.layers ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;

    // Netscape 6
    } else if ( document.getElementById ) {
        myKeyCode=e.which;
        myShiftKey=( myKeyCode == 16 ) ? true : false;
    }
   
    // Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
       
        document.getElementById('capslock').style.display = 'block';
        document.getElementById('capslock').firstChild.nodeValue = myMsg;
       
    // Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {

        document.getElementById('capslock').style.display = 'block';
        document.getElementById('capslock').firstChild.nodeValue = myMsg;
       
    }
    else
    {
   
        document.getElementById('capslock').style.display = 'none';
    }
}

</script>

<input type="text" size="30" onKeyPress="checkCapsLock(event);">&nbsp;<span id="capslock" style="position:absolute; padding-top:3px;">&nbsp;</span>

</body>
</html>

</code>
Avatar billede kimborg Nybegynder
12. december 2006 - 13:42 #17
Super!!!

Tak begge to
Avatar billede madeindk Nybegynder
12. december 2006 - 13:46 #18
Det var så lidt - takker for point :-)
Avatar billede olebole Juniormester
12. december 2006 - 13:58 #19
- og selvtak  ;o)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 23:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
I går 18:09 Outlook Classic, lukker ikke Af mort1 i E-mail programmer
13/0520:48 Bred buet skærm vs. 2 skærme Af Nanarsi i Skærme
13/0518:07 Tilslut printer til netværk med WPS - hvis WPS slukkes på Router mistes forbindelse. Af Uvanga i Wifi
11/0521:05 Questyle M15i lydforstærker Af valby i Diverse
White papers
Flere white papers »