Question

So using the advice I got here, I tried to implement it like this:

1. I created the following kbd.js file:

   function fnRenderKBD(elem, keysToDisplay)
   {
       var delimiter = '';
       var content = '';
       for(var i = 0, length = keysToDisplay.length; i < length; i++) {
           content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
           delimiter = '+';
       }
       elem.innerHTML = content;
   }
   (function() {
           var keys = [ 'Ctrl+X','Y','Z'];   
           var elem = document.getElementById('display');
           fnRenderKBD(elem, keys);
       }
   )();
   

2. Then I created the following stylesheet, called kbd.css:

   kbd {
       padding: 0.1em 0.6em;
       border: 1px solid #CCC;
       font-size: 11px;
       font-family: Arial,Helvetica,sans-serif;
       background-color: #F7F7F7;
       color: #333;
       -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
       -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
       box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       display: inline-block;
       margin: 0 0.1em;
       text-shadow: 0 1px 0 white;
       line-height: 1.4;
       white-space: nowrap;
   }​
   

3. Then, I tried to construct a simple HTML file to check the results, called keyboard-rendering.htm

   <script src="kbd.js"> </script>
   <LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">​
   <div id="display"></div>​
   

My question is, why does this not work (output is “​”), that is, why does it not give me the same output as the lower right quadrant here.

Answer 1

Maybe follow this:

window.onload = function() {

    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
};

and check your page’s charset:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">