Implementare copy clipboard su due campi

di il
5 risposte

Implementare copy clipboard su due campi

Un saluto a tutti,
ho una pagina con 20 box, ogni box contiene le credenziali di accesso a determinati siti,
mi piacerebbe molto modificare il codice per implementare la possibilità di effettuare al click del mouse il "copy clipboard"
della User e della Pass

In sostanza vorrei realizzare quello che vedo in tanti siti,
ovvero due div con due textbox User, Pass, (naturalmente onlyreader) con accanto l'icona "Copia Clipboard"

Attualmente ho questo codice:

<div class="col-sm-3">
	<div class="card-home">
		<div class="card-header-home"><b>Box 1</b></div>
			<div class="card-block-home">
			<a href="http://www.sito.it/" target="_blank"><img width="150" height="150" src="icon/img.jpg" class="img-responsive"><br/></a> 
					</div>
						<div class="card-header">
							<p><b>User: </b>Nome_Utente<br></p>
							<p><b>Pass: </b>Password</p>
						</div>
					</div>
			</div>
Ringrazio anticipatamente

5 Risposte

  • Re: Implementare copy clipboard su due campi

    Ciao,
    vorresti una cosa del genere?

    Prova il codice che ti ho postato... Se è ciò che vuoi vediamo di sistemare il tuo codice.
    Non ho impostato il textbox disabilitato ma è solo un'opzione in più.

    È anche possibile fare una chiamata js in 1 altro modo!

    Ciao
    
    <!DOCTYPE html>
    <html>
    <body>
    
    <input type="text" value="mi chiamo pippo" id="user">
    <button onclick="clip()">Copia testo</button>
    
    <script>
    function clip() {
      var copyText = document.getElementById("user");
      copyText.select();
      copyText.setSelectionRange(0, 99999)
      document.execCommand("copy");
      alert("Testo copiato: " + copyText.value);
    }
    </script>
    
    </body>
    </html>
    
    
  • Re: Implementare copy clipboard su due campi

    Buongiorno cali,
    anzitutto grazie per la risposta,
    il concetto di quello che vorrei realizzare è proprio quello da te compreso, però c'è da tener presente che ogni pagina contiene circa 20 card-home (bootstrap).

    Ho provato ad implementare il codice da te suggerito in questo modo:
    
    <!DOCTYPE html>
    <html>
    <body>
    
    <div class="col-sm-3">
    	<div class="card-home">
    		<div class="card-header-home"><b>Nome del Sito</b></div>
    			<div class="card-block-home">
    				 <a class="thumbnail" href="https://www.pagina.it" target="_blank"><img width="250" height="150" src="icon/lap_250.jpg" class="img-responsive"><br/></a>  
    			</div>
    				<div class="card-header">
    					<div><b>User: </b><input type="text" value="utente" id="user">
    					<button onclick="copyuser()">Copia User</button></div>
    					
    					<div><b>Pass: </b><input type="text" value="passwordaccesso" id="password">
    					<button onclick="copypass()">Copia Pass</button></div>
    					</div>
    				</div>
    			</div>
    
    	<script>
    	function copyuser() {
    	var copyText = document.getElementById("user");
    	copyText.select();
    	copyText.setSelectionRange(0, 99999)
    	document.execCommand("copy");
    	alert("Testo copiato: " + copyText.value);
    	}
    	</script>
    
    	<script>
    	function copypass() {
    	var copyText = document.getElementById("password");
    	copyText.select();
    	copyText.setSelectionRange(0, 99999)
    	document.execCommand("copy");
    	alert("Testo copiato: " + copyText.value);
    	}
    	</script>
    
    
    </body>
    </html>
    
    Naturalmente andrebbe sistemata anche la parte css



    Grazie ancora
  • Re: Implementare copy clipboard su due campi

    Ciao,
    hai qualcosa da dove partire? Così magari modifichiamo il codice... e lo adattiamo

    20 card-home ma sono dinamiche? Vengono recuperate da un DB con PHP o altro? Se si, c'è da costruire dinamicamente tutto! Un while che costruisce l'output.

    Se sono statiche è un po' lunga... ripetere 20 volte la stessa cosa :-/

    Non server aprire più tag <script> ma ne basta uno dove metti tutto. Dipende anche cosa devi fare... a parte questo.

    Hai un codice che mi puoi far vedere!

    Ciao
  • Re: Implementare copy clipboard su due campi

    Purtroppo le card-home sono state realizzate staticamente e non interagiscono con nessun database, ogni qualvolta scade la password di qualche sito, provvedo manualmente ad aggiornarla mettendo mano direttamente al codice

    
    <?php
    date_default_timezone_set('Europe/Rome');
    $today = date("Y-m-d");
    ?>
    
    <br/>
    
    <?php
    $sq1 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'ATTESA ACCETTAZIONE' and tipo_pren = 'PRIVATO' ORDER BY id_app ASC";
    $rs1 = $mysqli->query($sq1);
    $cnt1 = mysqli_num_rows($rs1);
    
    $sq2 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'LAVORAZIONE' and tipo_pren = 'PRIVATO' ORDER BY id_app ASC";
    $rs2 = $mysqli->query($sq2);
    $cnt2 = mysqli_num_rows($rs2);
    
    $sq3 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'TERMINATO' and tipo_pren = 'PRIVATO' ORDER BY id_app ASC";
    $rs3 = $mysqli->query($sq3);
    $cnt3 = mysqli_num_rows($rs3);
    ?>
    
    <div class="container-home">
    <div class="row">
    	  <div class="col-sm-3">
    		<div class="card">
    		  <div class="card-block">
    				<div class="alert alert-success-home" role="alert"><h2>PRIVATI APPUNTAMENTI OGGI</h2></div>
    				<ul class="list-group">
    					<li class="list-group-item justify-content-between">Attesa Accettazione: <a href="index.php?page=lista_appuntamenti_oggi&tipo=accettazione&cliente=privato"><span class="badge-home badge-default badge-pill"><?= $cnt1 ?></span></a></li>
    					<li class="list-group-item justify-content-between">In lavorazione: <a href="index.php?page=lista_appuntamenti_oggi&tipo=lavorazione&cliente=privato"><span class="badge-home badge-default badge-pill"><?= $cnt2 ?></span></a></li>
    				</ul>
    		  </div>
    		</div>
    	</div>
    
    <?php
    $sq4 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'ATTESA ACCETTAZIONE' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs4 = $mysqli->query($sq4);
    $cnt4 = mysqli_num_rows($rs4);
    
    $sq5 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'LAVORAZIONE' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs5 = $mysqli->query($sq5);
    $cnt5 = mysqli_num_rows($rs5);
    
    $sq6 = "SELECT * FROM appuntamenti WHERE data = '$today' AND stato_pren = 'TERMINATO' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs6 = $mysqli->query($sq6);
    $cnt6 = mysqli_num_rows($rs6);
    
    ?>
    
    <div class="col-sm-3">
        <div class="card">
          <div class="card-block">
            <div class="alert alert-success-home" role="alert"><h2>NOLEGGIO APPUNTAMENTI OGGI</h2></div>
    		<ul class="list-group">
    			<li class="list-group-item justify-content-between">Attesa Accettazione: <a href="index.php?page=lista_appuntamenti_oggi&tipo=accettazione&cliente=noleggio"><span class="badge-home badge-default badge-pill"><?= $cnt4 ?></span></a></li>
    			<li class="list-group-item justify-content-between">In lavorazione: <a href="index.php?page=lista_appuntamenti_oggi&tipo=lavorazione&cliente=noleggio"><span class="badge-home badge-default badge-pill"><?= $cnt5 ?></span></a></li>
    		</ul>
          </div>
        </div>
    </div>
    
    <?php
    $sq7 = "SELECT * FROM appuntamenti WHERE stato_pren = 'ATTESA ACCETTAZIONE' and tipo_pren = 'privato' ORDER BY id_app ASC";
    $rs7 = $mysqli->query($sq7);
    $cnt7 = mysqli_num_rows($rs7);
    
    $sq8 = "SELECT * FROM appuntamenti WHERE stato_pren = 'LAVORAZIONE' and tipo_pren = 'privato' ORDER BY id_app ASC";
    $rs8 = $mysqli->query($sq8);
    $cnt8 = mysqli_num_rows($rs8);
    
    $sq9 = "SELECT * FROM appuntamenti WHERE stato_pren = 'TERMINATO' and tipo_pren = 'privato' ORDER BY id_app ASC";
    $rs9 = $mysqli->query($sq9);
    $cnt9 = mysqli_num_rows($rs9);
    
    ?>
    
    <div class="col-sm-3">
    		<div class="card">
    		  <div class="card-block">
    			<div class="alert alert-warning-home" role="alert"><h2>PRIVATI APPUNTAMENTI TOTALI</h2></div>
    			<ul class="list-group">
    				<li class="list-group-item justify-content-between">Attesa Accettazione: <a href="index.php?page=appuntamenti_privati&tipo=accettazione"><span class="badge-home badge-default badge-pill"><?= $cnt7 ?></span></a></li>
    				<li class="list-group-item justify-content-between">In lavorazione: <a href="index.php?page=appuntamenti_privati&tipo=lavorazione"><span class="badge-home badge-default badge-pill"><?= $cnt8 ?></span></a></li>
    			</ul>
    		</div>
    	</div>
    </div>
    
    <?php
    $sq10 = "SELECT * FROM appuntamenti WHERE stato_pren = 'ATTESA ACCETTAZIONE' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs10 = $mysqli->query($sq10);
    $cnt10 = mysqli_num_rows($rs10);
    
    $sq11 = "SELECT * FROM appuntamenti WHERE stato_pren = 'LAVORAZIONE' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs11 = $mysqli->query($sq11);
    $cnt11 = mysqli_num_rows($rs11);
    
    $sq12 = "SELECT * FROM appuntamenti WHERE stato_pren = 'TERMINATO' and tipo_pren = 'noleggio' ORDER BY id_app ASC";
    $rs12 = $mysqli->query($sq12);
    $cnt12 = mysqli_num_rows($rs12);
    ?>
    
    	<div class="col-sm-3">
    		<div class="card">
    		  <div class="card-block">
    			<div class="alert alert-warning-home" role="alert"><h2>NOLEGGIO APPUNTAMENTI TOTALI</h2></div>
    			<ul class="list-group">
    				<li class="list-group-item justify-content-between">Attesa Accettazione: <a href="index.php?page=appuntamenti_noleggio&tipo=accettazione"><span class="badge-home badge-default badge-pill"><?= $cnt10 ?></span></a></li>
    				<li class="list-group-item justify-content-between">In lavorazione: <a href="index.php?page=appuntamenti_noleggio&tipo=lavorazione"><span class="badge-home badge-default badge-pill"><?= $cnt11 ?></span></a></li>
    			</ul>
    		  </div>
    		</div>
    	  </div>
    	</div><!--Chiudo la prima Row-->
    
    <div class="clear"></div>
    
    	<style>
    	p {
    	 margin: 0
    	} 
    	</style>
        
    	    <hr>
    		
    		<div class="row"><!--APRO LA PRIMA RIGA-->
                <div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 1</b></div>
    					<div class="card-block-home">
    						<a href="http://sito1.com/" target="_blank"><img width="150" height="150" src="icon/icon1.jpg" class="img-responsive"><br/></a>   
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 2</b></div>
    					<div class="card-block-home">
    						 <a href="http://www.sito2.com" target="_blank"><img width="150" height="150" src="icon/icon2.jpg" class="img-responsive"><br/></a> 
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 3</b></div>
    					<div class="card-block-home">
    						 <a href="https://sito3.com" target="_blank"><img width="150" height="150" src="icon/icon3.jpg" class="img-responsive"><br/></a> 
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>			
    
    			
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 4</b></div>
    					<div class="card-block-home">
    						<a class="thumbnail" href="https://sito4.com" target="_blank"><img width="150" height="150" src="icon/icon4.png" class="img-responsive"><br/></a>   
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    		</div><!--CHIUDO LA PRIMA RIGA-->
    
    		<div class="row"><!--APRO LA SECONDA RIGA-->
    		
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 5</b></div>
    					<div class="card-block-home">
    						 <a href="http://sito5.com/" target="_blank"><img width="150" height="150"src="icon/icon5.png" class="img-responsive"><br/></a>  
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 6</b></div>
    					<div class="card-block-home">
    						 <a href="https://www.sito6.asp" target="_blank"><img width="150" height="150"src="icon/icon6.jpg" class="img-responsive"><br/></a>
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 7</b></div>
    					<div class="card-block-home">
    						 <a href="http://sito7" target="_blank"><img width="150" height="150"src="icon/icon7.png" class="img-responsive"><br/></a> 
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    
    			
    			<div class="col-sm-3">
    				<div class="card-home">
    				<div class="card-header-home"><b>SITO 8</b></div>
    					<div class="card-block-home">
    						 <a href="https://www.sito8.com" target="_blank"><img width="150" height="150"src="icon/icon8.jpg" class="img-responsive"><br/></a> 
    					</div>
    					<div class="card-header">
    					<p><b>User: </b>utente<br></p>
    					<p><b>Pass: </b>password</p>
    					</div>
    				</div>
    			</div>
    		</div> <!--CHIUDO LA SECONDA RIGA-->	
    
    		
    	</div><!--Chiudo il Container-->
    	
    	<script>
    	function copyuser() {
    	var copyText = document.getElementById("user");
    	copyText.select();
    	copyText.setSelectionRange(0, 99999)
    	document.execCommand("copy");
    	alert("Testo copiato: " + copyText.value);
    	}
    	</script>
    
    	<script>
    	function copypass() {
    	var copyText = document.getElementById("password");
    	copyText.select();
    	copyText.setSelectionRange(0, 99999)
    	document.execCommand("copy");
    	alert("Testo copiato: " + copyText.value);
    	}
    	</script>
    


    mi sa che mi tocca scrivere x script per x card-home perchè dovrei assegnare un var copyText = document.getElementById diverso per ogni campo, giusto ?


  • Re: Implementare copy clipboard su due campi

    Ho dato un vista veloce...

    Non puoi aprire il tag <style> e poi chiuderlo in un DOM HTML ma lo devi fare nell' head. Oppure impostare i margini con un tuo css o impostarlo direttamente nelle proprietà nel DOM.

    Questo è errato...
    
    <div class="clear"></div>
    
    	<style>
    	p {
    	 margin: 0
    	} 
    	</style>
    </div>
    
    Questo è corretto...
    
    <html>
        <head>
        
        	<style>
    		p {
    	 		margin: 0
    		} 
    	</style>
    	
        </head>
        <body>
        </body>
    </html>    
    
    Oppure ti crei un tuo css dove lo carichi nell'head e ci metti ciò che ti server
    
    <html>
        <head>
        
    	<link href="tuofilecss.css" rel="stylesheet">
    
        </head>
        <body>
        </body>
    </html>    
    
    Nel PHP esegui una query controlli se ci sono righe e ok... ma le 3 SQL cosa restituiscono? Ci sono user e pwd? Le devi ciclare con un while per prendere il loro contenuto sempre se al loro interno di sono utente e password. Se la password è codificata in MD5 non puoi fare il processo inverso, se è scritta in chiaro (cosa che non dovrebbe) allora la puoi far copiare.

    Mi devi spiegare cosa fanno le 3 query e cosa c'è dentro! Esegui le query in phpmyadmin... Per lo sviluppo cosa utilizzi? Se utilizzassi un IDE come NteBeans ti accorgeresti subito degli errori perchè te lì segnala!

    La X è una variabile per farti capire che si devono ciclare...


    Non utilizzare i <p> ma
    
    <input type="text" name="userX" id="userX" maxlength="50" disabled="disabled">
    <input type="password" name="pwdX" id="pwdX" maxlength="50" autocomplete="off" disabled="disabled">
    
    Ciao
Devi accedere o registrarti per scrivere nel forum
5 risposte