Clavier virtuel en HTML, Javascript et CSS – Ebauche du clavier

Clavier virtuel

MàJ 09/12/13 : Autre version du clavier virtuel ici.


 
 

<html>
<head>
<title>Clavier virtuel</title>
<script type="text/javascript">
<!--
function verification(entree) {
  var seulement_ceci ="0123456789[]()-+*%/.";
  for (var i = 0; i < entree.length; i++)
   if (seulement_ceci.indexOf(entree.charAt(i))<0 ) return false;
  return true;
 }

 function resultat() {
   var x = 0;
  if (verification(window.document.clavier.affiche.value))
     x = eval(window.document.clavier.affiche.value);
   window.document.clavier.affiche.value = x;
 }

 function ajouter(caracteres) {
   window.document.clavier.affiche.value =
   window.document.clavier.affiche.value + caracteres;
 }

 function fonction_speciale(fonction) {
   if (verification(window.document.clavier.affiche.value)) {
     if(fonction == "sqrt") {
       var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = Math.sqrt(x);
   }
   if(fonction == "pow") {
     var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = x * x;
   }
   if(fonction == "log") {
     var x = 0;
     x = eval(window.document.clavier.affiche.value);
     window.document.clavier.affiche.value = Math.log(x);
   }
  } else window.document.clavier.affiche.value = 0
}
//-->
</script>
<style type="text/css">
<!--
.button{
	/*style du paragraphe*/
    font-family:Ubuntu;/*police utilisée*/
    font-size:100%
    width:60px;
    height:60px;
    padding-top:5px; /*permet le centrage vertical*/
    text-align:center;
    color:#222;
    background:#58ACFA;
	background:-moz-linear-gradient(top,#CDE7F5,#58ACFA);/*dégradé du bouton*/
    background:-webkit-gradient(linear, left top, left bottom, from(#CDE7F5), to(#58ACFA));
	/*arrondis du bouton*/
	    -webkit-border-radius:8px;
        -moz-border-radius:8px;
            border-radius:8px;
}
/*over c'est quand la souris passe dessus*/
:hover.button{
    color:#555;
    background:#58D3F7;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(#58D3F7));
}
/*active c'est quand on clique sur le bouton*/
:active.button{
    color:#555;
	background:url(http://www.google.com) no-repeat;
    background:#444;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(##58D3F7));
    -webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
       -moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
            box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
			}
.affiche { width:517px;
			height:120px;
			text-align:right;
           font-family:System,sans-serif;
           font-size:100%; }
table{
	background:-moz-linear-gradient( top, #BFC2C4, #D6C9C9);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(##58D3F7));
}
-->
</style>
</head>
<body bgcolor="#58ACFA" text="#000000">

<form name="clavier" action="" onSubmit="resultat();return false;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="affiche" align="right" class="affiche"></td>
</tr><tr>
<td  bgcolor="#E0E0E0">
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><input type="button" width="60" class="button" value="  A   " onClick="ajouter('A')"></td>
<td><input type="button" width="60" class="button" value="  Z   " onClick="ajouter('Z')"></td>
<td><input type="button" width="60" class="button" value="  E   " onClick="ajouter('E')"></td>
<td><input type="button" width="60" class="button" value="  R  " onClick="ajouter('R')"></td>
<td><input type="button" width="60" class="button" value="  T   " onClick="ajouter('T')"></td>
<td><input type="button" width="60" class="button" value="  Y   " onClick="ajouter('Y')"></td>
<td><input type="button" width="60" class="button" value="  U   " onClick="ajouter('U')"></td>
<td><input type="button" width="60" class="button" value="  I   " onClick="ajouter('I')"></td>
<td><input type="button" width="60" class="button" value="  O   " onClick="ajouter('O')"></td>
<td><input type="button" width="60" class="button" value="  P   " onClick="ajouter('P')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  Q   " onClick="ajouter('Q')"></td>
<td><input type="button" width="60" class="button" value="  S   " onClick="ajouter('S')"></td>
<td><input type="button" width="60" class="button" value="  D   " onClick="ajouter('D')"></td>
<td><input type="button" width="60" class="button" value="  F  " onClick="ajouter('F')"></td>
<td><input type="button" width="60" class="button" value="  G   " onClick="ajouter('G')"></td>
<td><input type="button" width="60" class="button" value="  H   " onClick="ajouter('H')"></td>
<td><input type="button" width="60" class="button" value="  J   " onClick="ajouter('J')"></td>
<td><input type="button" width="60" class="button" value="  K   " onClick="ajouter('K')"></td>
<td><input type="button" width="60" class="button" value="  L   " onClick="ajouter('L')"></td>
<td><input type="button" width="60" class="button" value="  M   " onClick="ajouter('M')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  W   " onClick="ajouter('W')"></td>
<td><input type="button" width="60" class="button" value="  X   " onClick="ajouter('X')"></td>
<td><input type="button" width="60" class="button" value="  C   " onClick="ajouter('C')"></td>
<td><input type="button" width="60" class="button" value="  V   " onClick="ajouter('V')"></td>
<td><input type="button" width="60" class="button" value="  B   " onClick="ajouter('B')"></td>
<td><input type="button" width="60" class="button" value="  N   " onClick="ajouter('N')"></td>
<td><input type="button" width="60" class="button" value="  .   " onClick="ajouter('.')"></td>
<td><input type="button" width="60" class="button" value="  ?   " onClick="ajouter('?')"></td>
<td><input type="button" width="60" class="button" value="  !   " onClick="ajouter('!')"></td>
</tr>
<tr>
<td><input type="reset"  width="60" class="button" value="  Res  "></td>
</tr>
</table>
</td></tr></table>
</form>

</body>
</html>

3 réflexions sur “Clavier virtuel en HTML, Javascript et CSS – Ebauche du clavier

  1. Very efficiently written information. It will be beneficial to everyone who employess it, including myself. Keep up the good work for sure i will check out more posts. baedkfedecee

  2. Thank you for every other informative blog. The place else may just I get that type of info written in such a perfect means? I’ve a project that I’m just now working on, and I have been at the glance out for such information. fcbeecdbcdeb

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s