Tastiera Virtuale

[Punix]

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

<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]

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

funzioni javascript tastiera file esterno:

$(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...

[KillerWorm]

Ciao, da un punto di vista puramente teorico dovrai rendere "variabile" il selettore jQuery che stabilisce il campo su cui agisce la tua tastiera. Nel tuo caso hai definito $('#pwd'), per cui è un riferimento statico.

In sostanza potresti usare una semplice variabile per quel selettore, e valorizzarla ad esempio sull'evento focus() dei campi che ti interessa far funzionare con la tua tastiera.

Se ti interessa quindi attivarla su dei campi specifici (ad esempio su #username e #pwd) ti basterebbe una roba del genere (da inserire magari dentro il ready):

var campoAttivo;
$('#username,#pwd').focus(function(){campoAttivo=this});

Va da se che puoi specificare come meglio ti pare i vari elementi su cui attivare la tastiera, definendo opportunamente il selettore. Ad esempio, se la vuoi su qualsiasi input text, puoi specificare una cosa del genere:

$('input[type=text]').focus...ecc.

Dovrai poi sostituire $('#pwd') con $(campoAttivo) sui vari punti in cui è usato quel selettore (nel tuo caso è usato su due punti).

La soluzione è relativamente semplice ma ci sarebbero comunque degli effetti collaterali, a livello funzionale, che magari dovresti valutare meglio.
Ad esempio la variabile inizialmente non è valorizzata, quindi agendo sulla tastiera si potrebbe verificare qualche errore. Dovresti eventualmente aggiungere dei controlli nella funzione click dei tasti, per verificare che esista un elemento su cui scrivere.
Ancora, la variabile resta valorizzata in base all'ultimo focus sul campo (tra quelli prestabiliti), e continua a mantenere il riferimento a quel campo anche se magari si agisce su altri campi non interessati. Questo potrebbe creare confusione se si agisce erroneamente sulla tastiera quando si è cliccato appunto su un campo non interessato, perché si andrebbe a scrivere sempre sull'ultimo campo attivato tra quelli prestabiliti.

Poi vedi tu cosa vuoi ottenere esattamente.

Buon proseguimento.

[Punix]

Ho optato per la prima opzione, e sembra funzionare, per adesso, mi va bene cosi, più in la inserisco anche gli opportuni controlli, grazie KillerWorm.

edit: ah ne approfitto per un ultima cosetta...il tasto "Maiusc" come puoi vedere nella funzione, mi permette di "aggiornare" la tastiera con diversi caratteri (speciali e maiuscolo)... il problema è che una volta attivato, ogni volta che utilizzo un carattere, il tasto maiusc si disattiva e la tastiera si riaggiorna con le lettere normali..se ad esempio volessi scrivere una parola tutta in maiuscolo...per ogni carattere dovrei andare ogni volta a pigiare su quel tasto...se io volessi invece far rimanere attivo il tasto Maiusc dopo averlo attivato? ad esempio lo attivo , scrivo l intera parola in maiuscolo che desidero, poi lo disattivo io ricliccandoci su, quindi non in automatico come succede adesso dopo aver usato un carattere.

[KillerWorm]

Non ho verificato ma, come da logica, mi pare che tale funzionamento sia gestito proprio dall'ultima condizione del tuo script:

            if(shifton == true) {
                onShift(0);
                shifton = false;
            }

Prova ad eliminarla o commentarla e vedi che succede.

[Punix]

Non ho verificato ma, come da logica, mi pare che tale funzionamento sia gestito proprio dall'ultima condizione del tuo script:

            if(shifton == true) {
                onShift(0);
                shifton = false;
            }

Prova ad eliminarla o commentarla e vedi che succede.

avevi proprio ragione...mi è bastato infatti togliere questa piccola parte e ho risolto il problema...grazie mille KillerWorm mi sei stato molto d aiuto, alla prossima