CODEWITHSUNDEEP
javascripthtmlcssinternet-explorergoogle-chrome
Freesnöw
Freesnöw

Reputation: 32213

IE vs Google Chrome

I have this in my html file:

<html>
    <head>
        <title>
            CMD.exe
        </title>

        <link rel="stylesheet" type="text/css" href="cmd.css" />
        <script language="JavaScript" SRC="cmd.js"></script>
    </head>
    <body onload="blinkCursor();">
        <span id="content">&gt;</span><span style="display:none;" id="blink"  >|</span> 
        <div onKeyPress="keyPress(event);" style="position:absolute;z-index:2;width:100%;height:100%;"></div>   
    </body>
</html>

This is my Javascript:

var blinkOn =false;

function blinkCursor() {
    if (blinkOn) 
        {   
            document.getElementById("blink").style.display="none";
        } else {
            document.getElementById("blink").style.display="inline";
        }
    blinkOn=!blinkOn;
    setTimeout("blinkCursor()",500);    
}

function keyPress(e) {
    var keynum = ('which' in event) ? event.which : event.keyCode;
    var val=String.fromCharCode(keynum);
    document.getElementById("content").innerHTML=document.getElementById("content").innerHTML+val
}

And if combined with this CSS style here:

html, body {
        background-color:black;
        overflow:hidden;
        font-family:"lucida console";
        color:white;
    }

Creates a cool CMD-like webpage. The only problem is that the text input doesn't work in Google Chrome but it works fine in IE (and perhaps ff?). I also don't know how to detect keys such as [ENTER] and [BACKSPACE].

Any help would be appreciated!

Upvotes: 1

Views: 971

Answers (1)

Dormouse
Dormouse

Reputation: 5198

I ran a jsFiddle and it seems Chrome wasn't registering the functions properly after the first blink. Also you were using event in the keyPress function when you'd defined it in the function as e. This worked for me:

var blinkOn =false;

blinkCursor = function() {
    if (blinkOn) 
        {   
            document.getElementById("blink").style.display="none";
        } else {
            document.getElementById("blink").style.display="inline";
        }
    blinkOn=!blinkOn;
    setTimeout("blinkCursor()",500);    
}

keyPress = function (e) 
{
    var keynum = ('which' in e) ? e.which : e.keyCode;
    var val=String.fromCharCode(keynum);
    document.getElementById("content").innerHTML=document.getElementById("content").innerHTML+val
}

If you're just having the "console" on the page as well you might as well switch the keyPress(event) from the div to the body tag.

To detect Enter and Backspace etc check for their keyCode like so:

keyPress = function (e)
{
    //keynum setting
    if (keynum == 13) { // it's a return key press }
    //other stuff
}

Replace 13 with the keycode of whatever you're looking to match.

The Fiddle is here: http://jsfiddle.net/XuNv2/

Upvotes: 6

Related Questions