To toggle HTML element via vanilla
JavaScript, please see .
To drag and drop HTML element via
jQuery, please see .
First we create a simple 0-9 kaypad:
Demo1
keyboard.html |
repository |
view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Keypad Example</title>
</head>
<body>
<input id="PaliInput" type="text" name="word" value="">
<div id="keyboard" style="position: absolute; border: 1px solid #ccc; padding: 1em;">
<input name="7" type="button" value="7" onclick="numClicked(this)"/>
<input name="8" type="button" value="8" onclick="numClicked(this)"/>
<input name="9" type="button" value="9" onclick="numClicked(this)"/>
<br>
<input name="4" type="button" value="4" onclick="numClicked(this)"/>
<input name="5" type="button" value="5" onclick="numClicked(this)"/>
<input name="6" type="button" value="6" onclick="numClicked(this)"/>
<br>
<input name="1" type="button" value="1" onclick="numClicked(this)"/>
<input name="2" type="button" value="2" onclick="numClicked(this)"/>
<input name="3" type="button" value="3" onclick="numClicked(this)"/>
</div>
<script type="text/javascript">
function numClicked(elm) {
document.getElementById("PaliInput").value += elm.value;
document.getElementById("PaliInput").focus();
}
</script>
</body>
</html>
|
Next, we make the kaypad draggable via jQuery and toggleable via vanilla
JavaScript:
Demo2
draggable-toggleable-keyboard.html |
repository |
view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Draggable Toggleable Keypad Example</title>
</head>
<body>
<input id="PaliInput" type="text" name="word" value="">
<span style="cursor: pointer; color: blue;" onclick="toggle(this);">Hide Keypad</span>
<div id="keyboard" style="position: absolute; border: 1px solid #ccc; padding: 1em; cursor: move;">
<input name="7" type="button" value="7" onclick="numClicked(this)"/>
<input name="8" type="button" value="8" onclick="numClicked(this)"/>
<input name="9" type="button" value="9" onclick="numClicked(this)"/>
<br>
<input name="4" type="button" value="4" onclick="numClicked(this)"/>
<input name="5" type="button" value="5" onclick="numClicked(this)"/>
<input name="6" type="button" value="6" onclick="numClicked(this)"/>
<br>
<input name="1" type="button" value="1" onclick="numClicked(this)"/>
<input name="2" type="button" value="2" onclick="numClicked(this)"/>
<input name="3" type="button" value="3" onclick="numClicked(this)"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#keyboard" ).draggable();
});
function numClicked(elm) {
document.getElementById("PaliInput").value += elm.value;
document.getElementById("PaliInput").focus();
}
function toggle(elm) {
var kb = document.getElementById("keyboard");
if (kb.style.display == "none") {
kb.style.display = "block";
elm.innerHTML = "Hide Keypad";
} else {
kb.style.display = "none";
elm.innerHTML = "Show Keypad";
}
}
</script>
</body>
</html>
|
For a full-featured keyboard, please check the references.
References:
Other links I found: