[Javascript] Tastiera virtuale

Punix · 20 Mar 2017

Salve ragazzi, ho bisogno di una mano...possiedo una tastiera virtuale, ecco i codici:

HTML:

<form action="" method="post" id="loginform">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    
    <label for="pwd">Password:</label>
    <input type="text" name="pwd" id="pwd"/>
    
    
</form>
<input class="tastiera" type="button" id="showkeyboard" onclick="change()" value="Apri
Tastiera">
</div>
<div id="keyboard">
    <div class="wrapper" id="row0">
        <input class="box" name="accent" type="button" value="`" />
        <input class="box" name="1" type="button" value="1" />
        <input class="box" name="2" type="button" value="2" />
        <input class="box" name="3" type="button" value="3" />
        <input class="box" name="4" type="button" value="4" />
        <input class="box" name="5" type="button" value="5" />
        <input class="box" name="6" type="button" value="6" />
        <input class="box" name="7" type="button" value="7" />
        <input class="box" name="8" type="button" value="8" />
        <input class="box" name="9" type="button" value="9" />
        <input class="box" name="0" type="button" value="0" />
        <input class="box" name="-" type="button" value="-" />
        <input class="box" name="=" type="button" value="=" />
        <input class="box1" name="backspace" type="button" value="Cancella" />
    </div>
    
    <div class="wrapper" id="row0_shift">
        <input class="box" name="tilde" type="button" value="~" />
        <input class="box" name="exc" type="button" value="!" />
        <input class="box" name="at" type="button" value="@" />
        <input class="box" name="hash" type="button" value="#" />
        <input class="box" name="dollar" type="button" value="$" />
        <input class="box" name="percent" type="button" value="%" />
        <input class="box" name="caret" type="button" value="^" />
        <input class="box" name="ampersand" type="button" value="&" />
        <input class="box" name="asterik" type="button" value="*" />
        <input class="box" name="openbracket" type="button" value="(" />
        <input class="box" name="closebracket" type="button" value=")" />
        <input class="box" name="underscore" type="button" value="_" />
        <input class="box" name="plus" type="button" value="+" />
        <input class="box1" name="backspace" type="button" value="Cancella" />
    </div>
    
    <div class="wrapper" id="row1">
        <input class="box" name="q" type="button" value="q" />
        <input class="box" name="w" type="button" value="w" />
        <input class="box" name="e" type="button" value="e" />
        <input class="box" name="r" type="button" value="r" />
        <input class="box" name="t" type="button" value="t" />
        <input class="box" name="y" type="button" value="y" />
        <input class="box" name="u" type="button" value="u" />
        <input class="box" name="i" type="button" value="i" />
        <input class="box" name="o" type="button" value="o" />
        <input class="box" name="p" type="button" value="p" />
        <input class="box" name="[" type="button" value="[" />
        <input class="box" name="]" type="button" value="]" />
        <input class="box" name="\" type="button" value="\" />
    </div>
    
    <div class="wrapper" id="row1_shift">
        <input class="box" name="Q" type="button" value="Q" />
        <input class="box" name="W" type="button" value="W" />
        <input class="box" name="E" type="button" value="E" />
        <input class="box" name="R" type="button" value="R" />
        <input class="box" name="T" type="button" value="T" />
        <input class="box" name="Y" type="button" value="Y" />
        <input class="box" name="U" type="button" value="U" />
        <input class="box" name="I" type="button" value="I" />
        <input class="box" name="O" type="button" value="O" />
        <input class="box" name="P" type="button" value="P" />
        <input class="box" name="{" type="button" value="{" />
        <input class="box" name="}" type="button" value="}" />
        <input class="box" name="|" type="button" value="|" />
    </div>
    
    <div class="wrapper" id="row2">
        <input class="box" name="a" type="button" value="a" />
        <input class="box" name="s" type="button" value="s" />
        <input class="box" name="d" type="button" value="d" />
        <input class="box" name="f" type="button" value="f" />
        <input class="box" name="g" type="button" value="g" />
        <input class="box" name="h" type="button" value="h" />
        <input class="box" name="j" type="button" value="j" />
        <input class="box" name="k" type="button" value="k" />
        <input class="box" name="l" type="button" value="l" />
        <input class="box" name=";" type="button" value=";" />
        <input class="box" name="'" type="button" value="'" />   
    </div>
    
    <div class="wrapper" id="row2_shift">
        <input class="box" name="a" type="button" value="A" />
        <input class="box" name="s" type="button" value="S" />
        <input class="box" name="d" type="button" value="D" />
        <input class="box" name="f" type="button" value="F" />
        <input class="box" name="g" type="button" value="G" />
        <input class="box" name="h" type="button" value="H" />
        <input class="box" name="j" type="button" value="J" />
        <input class="box" name="k" type="button" value="K" />
        <input class="box" name="l" type="button" value="L" />
        <input class="box" name=";" type="button" value=":" />
        <input class="box" name="'" type="button" value='"' />
    </div>
    
    <div class="wrapper" id="row3">
        <input class="box" name="Shift" type="button" value="Maiusc" id="shift" />
        <input id="row3c" class="box" name="z" type="button" value="z" />
        <input id="row3c" class="box" name="x" type="button" value="x" />
        <input id="row3c" class="box" name="c" type="button" value="c" />
        <input id="row3c" class="box" name="v" type="button" value="v" />
        <input id="row3c" class="box" name="b" type="button" value="b" />
        <input id="row3c" class="box" name="n" type="button" value="n" />
        <input id="row3c" class="box" name="m" type="button" value="m" />
        <input id="row3c" class="box" name="," type="button" value="," />
        <input id="row3c" class="box" name="." type="button" value="." />
        <input id="row3c" class="box" name="/" type="button" value="/" />
    </div>
    
    <div class="wrapper" id="row3_shift">
        <input class="box" name="Shift" type="button" value="Maiusc" id="shifton" />
        <input class="box" name="Z" type="button" value="Z" />
        <input class="box" name="X" type="button" value="X" />
        <input class="box" name="C" type="button" value="C" />
        <input class="box" name="V" type="button" value="V" />
        <input class="box" name="B" type="button" value="B" />
        <input class="box" name="N" type="button" value="N" />
        <input class="box" name="M" type="button" value="M" />
        <input class="box" name="lt" type="button" value="&lt;" />
        <input class="box" name="gt" type="button" value="&gt;" />
        <input class="box" name="?" type="button" value="?" />
    </div>
    <div class="wrapper" id="spacebar">
        <input class="box" name="Spazio" type="button" value="&nbsp;" />
    </div>
    
</div>
</center>


<script type="text/javascript" src="Serpinter/tast/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="Serpinter/tast/jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="Serpinter/tast/jquery-fieldselection.js"></script>

<script type="text/javascript" src="Serpinter/tast/vkeyboard.js"></script>

Punix · 20 Mar 2017

ps: scusate il messaggio era troppo lungo e l ho dovuto seperare in due parti

funzioni javascript tastiera file esterno:

Codice:

$(document).ready(function(){
    
    var shifton = false;
    
    // toggles the keyboard to show or hide when link is clicked
    $("#showkeyboard").click(function(e) {
        var height = $('#keyboard').height();
        var width = $('#keyboard').width();
        leftVal=e.pageX+80+"px";
        topVal=e.pageY-100+"px";
        $('#keyboard').css({left:leftVal,top:topVal}).toggle();
    });
    
    
    // makes the keyboard draggable
    $("#keyboard").draggable();   
    
    // toggles between the normal and the "SHIFT keys" on the keyboard
    function onShift(e) {
        var i;
        if(e==1) {
            for(i=0;i<4;i++) {
                var rowid = "#row" + i;
                $(rowid).hide();
                $(rowid+"_shift").show();
            }
        }
        else {
            for(i=0;i<4;i++) {
                var rowid = "#row" + i;
                $(rowid).show();
                $(rowid+"_shift").hide();
            }
        }
     }
    
    // function thats called when any of the keys on the keyboard are pressed
    $("#keyboard input").bind("click", function(e) {
                                      
        if( $(this).val() == 'Cancella' ) {
            $('#pwd').replaceSelection("", true);
        }
        
        else if( $(this).val() == "Maiusc" ) {
            if(shifton == false) {
                onShift(1);   
                shifton = true;
            }
            
            else {
                onShift(0);
                shifton = false;
            }
        }
        
        else {
        
            $('#pwd').replaceSelection($(this).val(), true);
            
            if(shifton == true) {
                onShift(0);
                shifton = false;
            }
        }
    });
    
});

come potete notare dal codice tale tastiera mi permette di interagire con un determinato textfield che ha un certo "id" nel mio caso con il campo per la password...veniamo al mio problema...ho aggiunto altri campi, usurname etc...se io volessi usare questa tastiera per scrivere su piu campi? come posso fare? ad esempio clicco all interno di un textfield e la tastiera mi va a scrivere li...clicco all interno di un altro e la tastiera mi scrive all interno di quest altro e cosi via...

Cerca

Cerca

[Javascript] Tastiera virtuale

Punix

Nuovo Utente

Punix

Nuovo Utente

Discussioni simili