Keypress / keydown Test

Keypress capture without input element

by Greg

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="maindiv">
<p id="text"></p>
 <input class="form-control input-lg" id="scan" type="text" name="" value="" autocomplete="off"/>
</div>
<button type="button" onclick="fully.showKeyboard()">Show keyboard</button>
<button type="button" onclick="fully.hideKeyboard()">hide keyboard</button>

CSS

p {
  //outline-style: inset;
    border: 2px solid black;
    outline-color:red;
    height: 30px;
}
p::after {
  content: "|";
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}

#scan {
  display: none;
}

JavaScript

//var fullystate = true;
if (typeof fully != "undefined") {
        fullystate = true;
				$('#maindiv').css("display", "none");
				$('#scan').css("display", "block");
				$('#text').css("display", "none");
				$('#maindiv').css("display", "block");
//   alert("GOT HERE");
}

$("p").dblclick(function(){
				$('#maindiv').css("display", "none");
				$('#scan').css("display", "block");
				$('#text').css("display", "none");
				$('#maindiv').css("display", "block");
//        fullystate = false;
        //alert("The paragraph was double-clicked.");
});

window.addEventListener('paste', function (e){
		var clipboardData, pastedData;
		// Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    input.textContent = pastedData;
});


var input = document.getElementById('text');

function appendCharacter(c) {
    switch (c) {
        case 13: // Backspace
            alert(document.getElementById("scan").value);
            break;
        case 8: // Backspace
            input.textContent = input.textContent.slice(0, -1);
            break;
        default:
            input.textContent = input.textContent + c;
    }
}

// Keypress gets the keyCode of the current character not key.
// e.g. pressing the 'A' key will result in 'a' unless 'Shift' is also held.
window.addEventListener('keypress', function (e) {
    console.log("keypress charcode " + e.charCode);
    console.log("keypress keycode " + e.keyCode);
    appendCharacter(e.key);
});

// Use Keydown to get special keys like Backspace, Enter, Esc.
window.addEventListener('keydown', function (e) {
    console.log("keydown charcode " + e.charCode);
    console.log("keydown keycode " + e.keyCode);
    switch (e.keyCode) {
        case 8: // Backspace
					if (fullystate == true){
            e.preventDefault();
            appendCharacter(e.keyCode);
          }else{
          
          }
					break;
        case 112: //F1
     ...