Menu
Community /Pin to ProfileBookmark
@cootheadNov 28.2014 — #Hi there Mattchuko,
[indent]
does this example help...
[/indent]
[i]coothead[/i]@cootheadDec 09.2014 — #Hi there Mattchuko,
[indent]
does this help in any way...
I have also coded the backspace button. ?
[/indent]
[i]coothead[/i]@cootheadJun 07.2017 — #Hi there i4imteyaz,
[indent]
and a warm welcome to these forums. ?
Does this help...
[/indent]
[i]coothead[/i]
Making an onscreen keyboard with HTML
Hey there, I am currently trying to make a little, simple music player for university with a search feature and for that I need to make on screen keyboard. I’ve layed out the buttons but I’m not sure what else I can do to make it input to the search box below it.
[url]http://gyazo.com/a155682d9f1f5fcbeb31ace29fccaf47
[url]http://gyazo.com/9643a8ca78ad4cb9ebdd8d545c41ccfe
Any further assistance would be greatly appreciated.
Sign in
to post a comment19 Comments(s) ↴
0
@cootheadNov 28.2014 — #Hi there Mattchuko,[indent]
does this example help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keyboard</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#keyboard {
display:inline-block;
padding:10px 15px;
border:1px solid #009;
border-radius:10px;
background-color:#87cdf9;
text-align:center;
box-shadow:4px 4px 4px #999;
}
#keyboard div {
margin:5px 0;
}
#space {
width:184px;
}
#keyboard label {
margin-top:20px;
font-family:serif;
text-decoration:underline;
}
#keyboard input {
box-shadow:2px 2px 2px #666;
}
#keyboard input[type="text"] {
margin-top:20px;
border:1px solid #666;
border-radius:4px;
box-shadow:none;
}
</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
i=document.getElementById('keyboard').getElementsByTagName('input');
for(c=0;c<i.length;c++) {
if(i[c].type==='button') {
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
document.getElementById('clear').onclick=function() {
document.getElementById('text').value='';
}
}
function makeClickHandler(c) {
i[c].onclick=function() {
document.getElementById('text').value+=this.value.toLowerCase();
};
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div><div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div><div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div><div>
<input id="space" type="button" value=" ">
<input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
</div><!-- end #keyboard -->
</body>
</html>[/color][/indent]
[i]coothead[/i]
0
@cootheadDec 09.2014 — #Hi there Mattchuko,[indent]
does this help in any way...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>keyboard</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#keyboard {
display:inline-block;
padding:10px 15px;
border:1px solid #009;
border-radius:10px;
background-color:#87cdf9;
text-align:center;
box-shadow:4px 4px 4px #999;
}
#keyboard div {
margin:5px 0;
}
#space {
width:184px;
}
#keyboard label {
margin-top:20px;
font-family:serif;
text-decoration:underline;
}
#keyboard input {
box-shadow:2px 2px 2px #666;
}
#keyboard input[type="text"] {
margin-top:20px;
border:1px solid #666;
border-radius:4px;
box-shadow:none;
}
#keyboard #back {
font-weight:bold;
}
</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
/* get all the input elements within the div whose id is "keyboard */
i=document.getElementById('keyboard').getElementsByTagName('input');
/* loop through all the elements */ <br/>
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value='';
}
}
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value=
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+=this.value.toLowerCase();
}
};
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div><div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div><div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div><div>
<input id="back" type="button" value="&#8592;">
<input id="space" type="button" value=" ">
<input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
</div><!-- end #keyboard -->
</body>
</html>[/color]I have also coded the backspace button. ?
[/indent]
[i]coothead[/i]
0
@cootheadJun 07.2017 — #Hi there i4imteyaz,[indent]
and a warm welcome to these forums. ?
Does this help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>keyboard</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#keyboard {
padding: 0.75em 1.5em;
border: 0.062em solid #069;
border-radius: 0.75em;
background-color: #87cdf9;
background-image: linear-gradient( to bottom, #87cdf9, #549ac6);
box-shadow: 0.25em 0.25em 0.25em #999;
text-align: center;
}
#keyboard div {
margin: 0.4em 0;
}
#space {
width: 14em;
}
#keyboard label {
margin-top: 1.25em;
text-decoration: underline;
}
#keyboard input {
box-shadow: 0.15em 0.15em 0.15em #666;
}
#keyboard input[type="text"] {
margin-top: 1.25em;
border: 0.062em solid #666;
border-radius: 0.25em;
box-shadow: none;
}
#keyboard #back {
font-weight: bold;
}
.show {
display: inline-block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="keyboard" class="show">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div><div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div><div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div><div>
<input id="back" type="button" value="&#8592;">
<input id="space" type="button" value=" ">
<input id="clear" type="reset" value="clear">
</div><div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<!-- #keyboard --></div>
<script>
(function() {
'use strict';
var i, c, t, delay = 5000, kb = document.getElementById('keyboard');
/* get all the input elements within the div whose id is "keyboard */
i = kb.getElementsByTagName('input');
/* loop through all the elements */ <br/>
for(c = 0;c < i.length; c++) {
/* find all the the input type="button" elements */
if(i[c].type === 'button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').addEventListener('click',
function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value = '';
},false);
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id === 'back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value =
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+= this.value.toLowerCase();
}
};
}
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function logout() {
kb.classList.remove('show');
kb.classList.add('hide');
}
function resetTimer() {
clearTimeout(t);
t = setTimeout(logout, delay)
}
resetTimer();
})();
</script>
</body>
</html>[/color][/indent]
[i]coothead[/i]