Cancellare carattere per carattere dentro un textfield

**Punix** · 08-03-2017, 21:00

Salve raga, il mio problema sembrerà banale (magari lo è davvero) .. sto creando una specie di tastierina in html...

codice:

<html>
<head>
<title>
</title>
<style type="text/css">
.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}
#button {
  padding: 15px 25px;
  cursor: pointer;
}
#button:active {
transform: translateY(4px);
}
</style>
</head>
<body>
<div style="margin-left:450px; margin-top: 250px;">
<form name="calculator">
<div class="wrapper">
  <div id="button" class="box a" value="a" onClick="document.calculator.ans.value+='a'">a</div>
  <div id="button" class="box b" value="b" onClick="document.calculator.ans.value+='b'">b</div>
  <div id="button" class="box c" value="c" onClick="document.calculator.ans.value+='c'">c</div>
  <div id="button" class="box d" value="d" onClick="document.calculator.ans.value+='d'">d</div>
  <div id="button" class="box e" value="e" onClick="document.calculator.ans.value+='e'">e</div>
  <div id="button" class="box f" value="f" onClick="document.calculator.ans.value+='f'">f</div>
  <div id="button" class="box g" value="g" onClick="document.calculator.ans.value+='g'">g</div>
  <div id="button" class="box h" value="h" onClick="document.calculator.ans.value+='h'">h</div>
 <input type="textfield" name="ans" value="">
</div>
</form>
</div> 
</body>
</html>

non riesco a fare alcune cosette...

la prima cosa che non riesco a fare è quella di creare un bottoncino che mi permetta di cancellare "ad uno a uno" i caratteri inseriti dentro il textfield... non voglio il classico <button type="reset"> che ti cancella direttamente tutto il contenuto dentro un campo, ma voglio cancellare i caratteri ad uno ad uno, dall ultimo inserito fino al primo...spero di essermi spiegato bene..si può fare ? come?=)

altra cosa che intendevo fare, e che non sono riuscito a fare , è quella di creare un bottone, per i caratteri in maiuscolo...
cosa deve fare questo bottone? una volta cliccato su tale bottone, voglio che la tastierina si "aggiorni" sulla stessa pagina, e che i bottoncini con le lettere minuscole si trasformino in bottoncini con lettere maiuscole... se riclicco di nuovo su tale bottone la tastiera ritorna alle lettere minuscole...si può far una cosa del genere? forse occorre un po di javascript, ma non sono molto bravo con il javascript...è fattibile questa cosa?=)

grazie in anticipo a chiunque vorrà darmi una mano..

**Vincent.Zeno** · 09-03-2017, 02:32

forse occorre un po di javascript

no... te ne occorre parecchio!

sposto nella sezione adeguata

**cavicchiandrea** · 09-03-2017, 08:23

http://www.html.it/script/una-tastie...le-con-jquery/ se non ti va bene cerca su google con termini simili, non avendo conoscenze js ritengo sia l'unica strada possibile

**Punix** · 09-03-2017, 18:57

ps: qualche mod può gentilmente sistemare il titolo di questa discussione, non so in "tastiera javascript/html" o roba simile , con un titolo più appropriato insomma ?=)

Originariamente inviata da cavicchiandrea

http://www.html.it/script/una-tastie...le-con-jquery/ se non ti va bene cerca su google con termini simili, non avendo conoscenze js ritengo sia l'unica strada possibile

Grazie, prendendo spunto dalla tastierina che mi hai linkato, sono riuscito a farne una carina funzionante...

Ho un ultimo quesito da porvi...

codice:

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

codice:

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();
            }
        }
     }

come potete vedere dalle parti di codice che vi ho messo qui sopra, questa tastierina mi permette di scrivere all interno del textfield che ha come id ( id="psw")..nel textfield per inserire l'username non funziona ...il problema è proprio questo.. se io ora volessi inserire questa tastierina all interno di una pagina di registrazione, dove ho piu textfield, per esempio l'email , username, password etc e volessi usare questa tastierina in tutti i campi...come faccio?
Vorrei far in modo che selezionando all interno di un qualunque textfield, io possa andar a scrivere all interno di esso con la tastierina..e quindi non usarla solo per un determinato textfield...spero di essermi spiegato bene...

**Punix** · 09-03-2017, 19:02

scusate era questa la parte di codice javascript che volevo postare

codice:

    // 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;
            }
        }
    });
    
});

**cavicchiandrea** · 09-03-2017, 19:40

Prova cosi

codice:

// function thats called when any of the keys on the keyboard are pressed  
  $("input:text, input:password").bind("click",function(e){
                                       
        if( $(this).val()=='Cancella'){
            $(this).replaceSelection("",true);
        }
        
        elseif( $(this).val()=="Maiusc"){
            if(shifton ==false){
                onShift(1);    
                shifton =true;
            }
            
            else{
                onShift(0);
                shifton =false;
            } 
        }
        
        else{
        
            $(this).replaceSelection($(this).val(),true);
            
            if(shifton ==true){
                onShift(0);
                shifton =false;
            }
        }
    });
    
});

**Punix** · 10-03-2017, 00:31

Originariamente inviata da cavicchiandrea

Prova cosi

codice:

// function thats called when any of the keys on the keyboard are pressed  
  $("input:text, input:password").bind("click",function(e){
                                       
        if( $(this).val()=='Cancella'){
            $(this).replaceSelection("",true);
        }
        
        elseif( $(this).val()=="Maiusc"){
            if(shifton ==false){
                onShift(1);    
                shifton =true;
            }
            
            else{
                onShift(0);
                shifton =false;
            } 
        }
        
        else{
        
            $(this).replaceSelection($(this).val(),true);
            
            if(shifton ==true){
                onShift(0);
                shifton =false;
            }
        }
    });
    
});

mmh ...sembra proprio non funzionare...non riesco a scrivere in nessun campo in questo modo

Discussione: Cancellare carattere per carattere dentro un textfield

Strumenti discussione

Ricerca discussione

Visualizza

Cancellare carattere per carattere dentro un textfield

Permessi di invio