Usare il pulsante TAB per aggiungere una nuova riga

di il
8 risposte

Usare il pulsante TAB per aggiungere una nuova riga

Un saluto a tutti,
ho una pagina all'interno di un gestionale la quale permette agli utenti di inserire delle commesse di lavoro, diversi anni fa quando realizzai la pagina feci in modo che accanto ad ogni riga ci fosse un'icona con il simbolo (+) cliccando su tale icona l'utente aggiunge dinamicamente una riga alla commessa, questa la struttura della riga ed il codice javascript

<script type="text/javascript">
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
    
$('body').on('click', '.add', function() {
cindex++;

if(cindex<=15){
var newRow = '<tr class="righe"><td><input type="text" name="itr'+cindex+'" id="itr'+cindex+'" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for'+cindex+'" id="for'+cindex+'" class="t1" size="10"></td><td><input type="text" name="q'+cindex+'" class="t2 somma" id="q'+cindex+'" size="3" value="0.0" onkeyup="SommaRiga('+cindex+')" placeholder="0"></td><td><input type="text" name="iu'+cindex+'" class="t2 somma"  onBlur="Format('+cindex+')" onkeyup="SommaRiga('+cindex+')" id="iu'+cindex+'" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc'+cindex+'" class="t2 somma" onkeyup="Virgola('+cindex+')" id="sc'+cindex+'" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_'+cindex+'" id="imp_'+cindex+'" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add'+cindex+'" class="add"></td></tr>'
	$("#commessa tbody tr").eq((cindex-1)).after(newRow)
	}else{
	alert('Non puoi inserire più di 15 righe');
	return false;
	}
        $('.add').not(':last').addClass( 'addisable' ).removeClass( 'add' )
        }).on('focus','.somma', function(){
	$(this).not('input[name^="imp_"]').val('')
	})
});
</script>

<style type="text/css">
.add{cursor:pointer;}
.addisable{opacity:0.5;}
.remove{cursor:pointer; visibility:visible;}
.removedisable{visibility:hidden;}
.uppercase{border:#999 1px solid;}
#totale{font-weight: bold;border: 1px groove #900;}
</style>



vorrei implementare la possibilità di aggiungere una nuova riga anche premendo sul tasto TAB, mi dareste una mano per comprendere come fare?

Grazie

8 Risposte

  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Ciao, se lavori con jquery dovresti mettere un capture per il tab + shift (secondo me complica meno la cosa) di questo tipo.
    Si potrebbe sviluppare anche in js puro.
    
    $('body').on('keydown', '#tuocontainer', function (e) {
            if (e.shiftKey && e.keyCode == 9) {
                e.preventDefault();
                console.log(e.keyCode); // solo per test
                // tuo codice
            }
        });
    
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    ninja72 ha scritto:


    Ciao, se lavori con jquery dovresti mettere un capture per il tab + shift (secondo me complica meno la cosa) di questo tipo.
    Si potrebbe sviluppare anche in js puro.
    
    $('body').on('keydown', '#tuocontainer', function (e) {
            if (e.shiftKey && e.keyCode == 9) {
                e.preventDefault();
                console.log(e.keyCode); // solo per test
                // tuo codice
            }
        });
    
    Ciao ninja72,
    grazie per il tuo intervento, posso chiederti la gentilezza (se puoi) di implementare la parte di codice da te scritta direttamente nel mio, cosi mi eviti di fare casini con il codice già scritto e posso fare i dovuti test, all'utente deve comunque restare l'icona del simbolo (+)

    Grazie sempre per gli interventi a mio supporto
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Non conosco bene jquery, prova ad inserire dopo la funzione $('body').on('click', '.add', function () {});
    Al posto di container metti il riferimento id del form magari.
    
    $('body').on('keydown', '#container', function (e) {
            if (e.shiftKey && e.keyCode == 9) {
                e.preventDefault();
                cindex++;
                if (cindex <= 15) {
                    var newRow = '<tr class="righe"><td><input type="text" name="itr' + cindex + '" id="itr' + cindex + '" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for' + cindex + '" id="for' + cindex + '" class="t1" size="10"></td><td><input type="text" name="q' + cindex + '" class="t2 somma" id="q' + cindex + '" size="3" value="0.0" onkeyup="SommaRiga(' + cindex + ')" placeholder="0"></td><td><input type="text" name="iu' + cindex + '" class="t2 somma"  onBlur="Format(' + cindex + ')" onkeyup="SommaRiga(' + cindex + ')" id="iu' + cindex + '" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc' + cindex + '" class="t2 somma" onkeyup="Virgola(' + cindex + ')" id="sc' + cindex + '" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_' + cindex + '" id="imp_' + cindex + '" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add' + cindex + '" class="add"></td></tr>'
                    $("#commessa tbody tr").eq((cindex - 1)).after(newRow)
                } else {
                    alert('Non puoi inserire più di 15 righe');
                    return false;
                }
                $('.add').not(':last').addClass('addisable').removeClass('add');
            }
        }).on('focus', '.somma', function () {
            $(this).not('input[name^="imp_"]').val('')
        });
    
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Ciao ninja72,
    purtroppo non funziona, come da te suggerito ho sostituito #container con il nome del modulo, funziona sempre il click sul segno (+) che va a creare una nuova riga, ma non il tabulatore

    
    <script type="text/javascript">
    $(document).ready(function(){
    var regex = /^(.*)(\d)+$/i;
    var cindex = 1;
        
    	$('body').on('click', '.add', function() {
    	cindex++;
    	
    	if(cindex<=15){
    	var newRow = '<tr class="righe"><td><input type="text" name="itr'+cindex+'" id="itr'+cindex+'" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for'+cindex+'" id="for'+cindex+'" class="t1" size="10"></td><td><input type="text" name="q'+cindex+'" class="t2 somma" id="q'+cindex+'" size="3" value="0.0" onkeyup="SommaRiga('+cindex+')" placeholder="0"></td><td><input type="text" name="iu'+cindex+'" class="t2 somma"  onBlur="Format('+cindex+')" onkeyup="SommaRiga('+cindex+')" id="iu'+cindex+'" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc'+cindex+'" class="t2 somma" onkeyup="Virgola('+cindex+')" id="sc'+cindex+'" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_'+cindex+'" id="imp_'+cindex+'" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add'+cindex+'" class="add"></td></tr>'
    	$("#commessa tbody tr").eq((cindex-1)).after(newRow)
    	}else{
    	alert('Non puoi inserire più di 15 righe');
    	return false;
    	}
            $('.add').not(':last').addClass( 'addisable' ).removeClass( 'add' )
            }).on('focus','.somma', function(){
    	$(this).not('input[name^="imp_"]').val('')
    	})
    });
    
    $('body').on('keydown', '#inscomm', function (e) {
            if (e.shiftKey && e.keyCode == 9) {
                e.preventDefault();
                cindex++;
                if (cindex <= 15) {
                    var newRow = '<tr class="righe"><td><input type="text" name="itr' + cindex + '" id="itr' + cindex + '" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for' + cindex + '" id="for' + cindex + '" class="t1" size="10"></td><td><input type="text" name="q' + cindex + '" class="t2 somma" id="q' + cindex + '" size="3" value="0.0" onkeyup="SommaRiga(' + cindex + ')" placeholder="0"></td><td><input type="text" name="iu' + cindex + '" class="t2 somma"  onBlur="Format(' + cindex + ')" onkeyup="SommaRiga(' + cindex + ')" id="iu' + cindex + '" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc' + cindex + '" class="t2 somma" onkeyup="Virgola(' + cindex + ')" id="sc' + cindex + '" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_' + cindex + '" id="imp_' + cindex + '" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add' + cindex + '" class="add"></td></tr>'
                    $("#commessa tbody tr").eq((cindex - 1)).after(newRow)
                } else {
                    alert('Non puoi inserire più di 15 righe');
                    return false;
                }
                $('.add').not(':last').addClass('addisable').removeClass('add');
            }
        }).on('focus', '.somma', function () {
            $(this).not('input[name^="imp_"]').val('')
        });
    
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    (e.shiftKey && e.keyCode == 9) fa riferimento a shit+tab.
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Se tengo premuto shift+tab non succede assolutamente nulla nel senso che il cursore resta esattamente nella posizione dove si trova.
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Se premo 15 volte shit+tab mi compare l'alert('Non puoi inserire più di 15 righe');
    dunque l'evento dei tasti viene catturato, possono esserci altri problemi, non avento il progetto non è facile risolvere.
  • Re: Usare il pulsante TAB per aggiungere una nuova riga

    Buongiorno,
    ti posto il codice della pagina che si occupa di inserire la commessa di lavoro, io se provo a digitare anche per 15 volte il tasto shift+tab non compare l'alert, anche se per l'utente la cosa più semplice sarebbe quella di usare solo il tasto tab e quando arriva alla fine di ogni riga con il tab viene simulato il click sul pulsante (+)




    
    <script type="text/javascript" src="js/validate.js"></script>
    <?php include("js/cavicchi.js"); ?>
    
    <form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
    <div class="form-container">
    
    <div class="card-commesse">
      <div class="card-header">Anagrafica Cliente</div>
      <div class="card-block">
    
    	<div class="row">
    		<div class="col-md-2">
    			  <div class="input-group">
    				<span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
    			  </div>
    		</div>
    	</div>
    	  
    	  <hr>
    	
    	<div class="row">
    		<div class="col-md-4">
    			  <div class="input-group">
    				<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" aria-hidden="true" name="cliente" placeholder="Nome Cognome Cliente" required>
    			  </div>
    		</div>
    		
    		<div class="col-md-4">
    			  <div class="input-group">
    				<span class="input-group-addon"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" name="indirizzo" placeholder="Indirizzo">
    			  </div>
    		</div>	
    
    		<div class="col-md-4">
    			  <div class="input-group">
    				<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" name="tel" placeholder="Telefono" required>
    			  </div>
    		</div>	
    	</div> 	
    </div> 
    </div> <!--Close Div Anagrafica Cliente-->
    
    
    <div class="card-commesse">
      <div class="card-header">Anagrafica Vettura</div>
      <div class="card-block">
    
    	<div class="row">
    		
    		<div class="col-md-4">
    		 <label class="sr-only" for="Veicolo">Veicolo</label>
    			  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    				<span class="input-group-addon"><i class="fa fa-car" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" name="veicolo" placeholder="Veicolo" required >
    			  </div>
    		</div>
    		
    		<div class="col-md-4">
    		 <label class="sr-only" for="Targa">Targa</label>
    			  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    				<span class="input-group-addon"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" name="targa" placeholder="Targa Veicolo" id="targa" maxlength="8" onkeyup="VerificaTarga(this)" required>
    			  </div>
    		</div>
    		
    		<div class="col-md-4">
    		 <label class="sr-only" for="Km">Km</label>
    			  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    				<span class="input-group-addon"><i class="fa fa-refresh" aria-hidden="true"></i></span>
    				<input type="text" class="form-control" name="km" placeholder= "Km Veicolo" id="km" onkeyup="VerificaKm(this)" required>
    			  </div>
    		</div>	
    	</div>
    	  
    	  <hr>
    	
    	
    <div class="row">		
    		<div class="col-md-4">
    				 <label class="sr-only" for="n_tecnico">Tecnico</label>
    				 <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    					<span class="input-group-addon"><i class="fa fa-users" aria-hidden="true"></i></span>
    						<select class="form-control" id="n_tecnico" name="n_tecnico" required>
    						<?php 
    							$sq1 = "SELECT * FROM tecnico ORDER BY n_tecnico ASC";
    							$rs1 = $mysqli->query($sq1);
    							echo "<option value=''> Seleziona Tecnico ... </option>"; 
    							while ($row = $rs1->fetch_array(MYSQLI_ASSOC)) {
    							$n_tecnico = mysqli_real_escape_string($mysqli, strtoupper($row['n_tecnico']));
    							echo "<option value='$n_tecnico'>$n_tecnico</option>";
    							}
    						?>
    						</select>
    				</div>				
    		</div>
    		
    		<div class="col-md-4">
    				 <label class="sr-only" for="pagamento">Pagamento</label>
    				 <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    					<span class="input-group-addon"><i class="fa fa-credit-card" aria-hidden="true"></i></span>
    						<select class="form-control" id="pagamento" name="pagamento" required>
    						<?php 
    							$sq1 = "SELECT * FROM tipo_pagamento ORDER BY stato_pag ASC";
    							$rs1 = $mysqli->query($sq1);
    							echo "<option value=''> Seleziona Pagamento </option>"; 
    							while ($row = $rs1->fetch_array(MYSQLI_ASSOC)) {
    							$stato_pag = mysqli_real_escape_string($mysqli, strtoupper($row['stato_pag']));
    							echo "<option value='$stato_pag'>$stato_pag</option>";
    							}
    						?>
    						</select>
    		</div>
    				
    		</div>		
    
    		<div class="col-md-4">
    				 <label class="sr-only" for="allegato">Allegato</label>
    				 <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    					<span class="input-group-addon"><i class="fa fa-paperclip" aria-hidden="true"></i></span>
    						<select class="form-control" id="allegato" name="allegato" required>
    						<?php 
    							$sq1 = "SELECT * FROM allegato ORDER BY allegato ASC";
    							$rs1 = $mysqli->query($sq1);
    							echo "<option value=''> Allegato </option>"; 
    							while ($row = $rs1->fetch_array(MYSQLI_ASSOC)) {
    							$allegato = mysqli_real_escape_string($mysqli, strtoupper($row['allegato']));
    							echo "<option value='$allegato'>$allegato</option>";
    							}
    						?>
    						</select>
    				</div>
    				
    		</div>	
    	</div>
    	  	  
    </div>
    </div><!--Close Div Anagrafica Vettura-->
    
    
    <div class="card-commesse">
      <div class="card-header">Interventi Manutenzione Veicolo</div>
      <div class="card-block">
    
    	<table id="commessa">
    		<tbody>
    		<tr>
    			<td>Intervento</td>
    			<td>Fornitore</td>
    			<td>Q.t&agrave;</td>
    			<td>Unitario</td>
    			<td>Sconto %</td>
    			<td>Totale</td>
    			<td>Aggiungi</td>
    		</tr>
    
    			<tr class="righe">
    			<td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49" required ></td>
    			<td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
    			<td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0" required></td>
    			<td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6" value="0.0" placeholder="0.00" autocomplete="off"></td>
    			<td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto" autocomplete="off"></td>
    			<td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td>
    			<td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
    			</tr>
    
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td>Tot. Gen.</td>
    			<td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
    		</tr>
    		</tbody>
    	</table> 
    	
    
    </div>
    </div>
    
    <div class="card-commesse">
      <div class="card-header">Gestione Allegati</div>
      <div class="card-block">
    
    	<div class="row">
    		
    		<div class="col-md-4">
    			<label class="control-label">Allegato 1</label>
    			<input id="allegato1" name="allegato1" type="file" class="file file-loading" data-allowed-file-extensions='["pdf", "xls", "xlsx", "doc", "docx" ]'>
    		</div>
    
    
    		<div class="col-md-4">
    			<label class="control-label">Allegato 2</label>
    			<input id="allegato2" name="allegato2" type="file" class="file file-loading" data-allowed-file-extensions='["pdf", "xls", "xlsx", "doc", "docx" ]'>
    		</div>
    
    		<div class="col-md-4">
    			<label class="control-label">Allegato 3</label>
    			<input id="allegato3" name="allegato3" type="file" class="file file-loading" data-allowed-file-extensions='["pdf", "xls", "xlsx", "doc", "docx" ]'>
    		</div>		
    
    	</div>
    	
    </div>
    </div><!--Close Div Gestione Allegati-->
    
    	<div class="text-right">
    		<button type="submit" class="btn btn-success right" onclick="return confirm('Vuoi registrare la commessa ?')">Registra commessa</button>
    	</div>
    	  
    </div><!--Close Form Container-->
    </form><!--Close Form-->
    
Devi accedere o registrarti per scrivere nel forum
8 risposte