It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below:
The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purposes, every time I click on a different text field and input keys, I end up with double characters in the field.
Here's the modified code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/keyboard_css.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<label>Client Name</label><div class="tbx" id="tbx_1" contenteditable></div>
<div class="tbx" id="tbx_2" contenteditable></div>
<div class="tbx" id="tbx_3" contenteditable></div>
<div class="tbx" id="tbx_4" contenteditable></div>
<div class="tbx" id="tbx_5" contenteditable></div>
<ul id="keyboard">
<!-- Keyboard layout goes here -->
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</body>
</html>
<script>
$( document ).ready(function() {
// Hide Keyboard on load
$('#keyboard li').hide();
});
// JavaScript functions for keyboard functionality
</script>'