Script per far scomparire l'input dopo aver premuto invio?

  • Creatore Discussione Creatore Discussione ppigna
  • Data di inizio Data di inizio
P

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Buonasera a tutti :)
Qualcuno può crearmi (o trovare su internet, io ho cercato vanamente) uno script Javascript che fa in modo che un <input type="text"> scompaia (e appaia tipo una scritta) dopo aver premuto il tasto invio della tastiera? La cosa particolare che chiedo, però, è che il tasto invio non deve anche inviare i dati dell'input (che saranno inviati dopo da un button) ma solo far scomparire il campo. E' possibile? Poi il button legge lo stesso il contenuto del campo?
Posto qui il codice della pagina, sperando di farvi capire meglio il contesto (non guardate le parti commentate):
HTML: 
<body>
		<div id="ac_background" class="ac_background">
			<img class="ac_bgimage" src="images/galassia1.jpg" alt="Background"/>
			<div class="ac_overlay"></div>
			<div class="ac_loading"></div>
		</div>
		<div id="ac_content" class="ac_content">
			<h1>Oracolo del Web<span><br />Completa i campi e poi premi invio</span></h1>
			<form action="frase.php" method="post">
			<div class="ac_menu"> 
				<ul>
					<li>
						<a href="images/galassia2.jpg">Giorno</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Giorno</h2>
							<ul>
								<li>Che giorno è oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="giorno" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$giorno = htmlspecialchars($_POST['giorno']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia3.jpg">Mese</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Mese</h2>
							<ul>
								<li>In che mese siamo oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="mese" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$mese = htmlspecialchars($_POST['mese']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia4.jpg">Nome</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Nome</h2>
							<ul>
								<li>Da quante lettere è formato il tuo (primo) nome? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="nome" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$nome = htmlspecialchars($_POST['nome']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia5.jpg">Invio</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Invio</h2>
							<ul>
								<li><p>Premi Invia per visualizzare il responso dell'oracolo.</p></li>
								<li><br /></li>
							</ul>
							<input type="submit" name="Invia"  value="  Invia  " size="10" onclick="location.href='frase.php'">
						</div>
					</li>
				</ul>
			</div>
			</form>
		</div>
		<div class="ac_footer">
			<span>Copyright (c) 2013 oracolodelweb.altervista.org | All rights reserved | Template by: <a href="http://www.tympanus.net">tympanus.net</a></span>
			<span style="float:right; padding-right:5px">Created by Giulio Pignatti and Luca Nisidi</span>
		</div>
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    </body>

Grazie mille, ciao :)
 
Il modo più semplice che mi viene in mente è usare jquery che hai già incluso nella pagina e mettere su visible:hidden gli input.
Grazie a questa proprietà css spariscono visivamente ma vengono ancora tenuti in considerazione dal browser come se fossero normalmente visibili.

Prova così:
HTML: 
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
        }
    });

});
</script>

"Dato memorizzato!" è il testo che dovrebbe comparire una volta premuto invio.
Il posizionamento assoluto l'ho incluso perché hidden (come ho scritto in precedenza) non cancella l'elemento ma lo nasconde soltanto, l'elemento continua ad occupare lo spazio che occupava prima e quindi, se non facessi così, il testo comparirebbe una riga più in basso.

Forse ci sono soluzioni migliori però, al momento prova a vedere se così funziona ;-)
 
flameseeker ha scritto:
Il modo più semplice che mi viene in mente è usare jquery che hai già incluso nella pagina e mettere su visible:hidden gli input.
Grazie a questa proprietà css spariscono visivamente ma vengono ancora tenuti in considerazione dal browser come se fossero normalmente visibili.

Prova così:
HTML: 
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
        }
    });

});
</script>

"Dato memorizzato!" è il testo che dovrebbe comparire una volta premuto invio.
Il posizionamento assoluto l'ho incluso perché hidden (come ho scritto in precedenza) non cancella l'elemento ma lo nasconde soltanto, l'elemento continua ad occupare lo spazio che occupava prima e quindi, se non facessi così, il testo comparirebbe una riga più in basso.

Forse ci sono soluzioni migliori però, al momento prova a vedere se così funziona ;-)
Clicca per allargare...

Grazie mille, sei molto gentile :)
Ma non è che di default il tasto invio (quando sei su un input) è collegato al bottone corrispondente? Si può evitare?
 
Hai perfettamente ragione, per evitare il lancio automatico del form dovrebbe bastare fare così:
HTML: 
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>

Tienimi aggiornato ;)
 
flameseeker ha scritto:
Hai perfettamente ragione, per evitare il lancio automatico del form dovrebbe bastare fare così:
HTML: 
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>

Tienimi aggiornato ;)
Clicca per allargare...

Ok grazie mille :) ma come si fa ad associare questo codice ai tre form? Dove devo mettere questo codice insomma?
 
Puoi posizionarlo subito sotto le librerie che includi:
HTML: 
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>


Il selettore che ti ho scritto:
Codice: 
$('input[type="text"]')

Fa si che lo script agisca automaticamente su tutti gli input di tipo text che hai in quella pagina.
Se vuoi una frase diversa per ogni input si deve modificare script in questa maniera:
HTML: 
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>input giorno!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>input mese!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>input nome!</p>');
                    break;
            }
            return false;
        }
    });

});
 
flameseeker ha scritto:
Puoi posizionarlo subito sotto le librerie che includi:
HTML: 
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>


Il selettore che ti ho scritto:
Codice: 
$('input[type="text"]')

Fa si che lo script agisca automaticamente su tutti gli input di tipo text che hai in quella pagina.
Se vuoi una frase diversa per ogni input si deve modificare script in questa maniera:
HTML: 
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>input giorno!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>input mese!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>input nome!</p>');
                    break;
            }
            return false;
        }
    });

});
Clicca per allargare...

Grazie mille, veramente, credo tu sia la persona più gentile che io abbia mai trovato su un forum ahahah
Però purtroppo premendo invio sul form mi fa ancora come se premessi sul pulsante. Ti riposto il codice, magari ho sbagliato qualcosa io...
HTML: 
<body>
		<div id="ac_background" class="ac_background">
			<img class="ac_bgimage" src="images/galassia1.jpg" alt="Background"/>
			<div class="ac_overlay"></div>
			<div class="ac_loading"></div>
		</div>
		<div id="ac_content" class="ac_content">
			<h1>Oracolo del Web<span><br />Completa i campi e poi premi invio</span></h1>
			<form action="frase.php" method="post">
			<div class="ac_menu"> 
				<ul>
					<li>
						<a href="images/galassia2.jpg">Giorno</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Giorno</h2>
							<ul>
								<li>Che giorno è oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="giorno" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$giorno = htmlspecialchars($_POST['giorno']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia3.jpg">Mese</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Mese</h2>
							<ul>
								<li>In che mese siamo oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="mese" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$mese = htmlspecialchars($_POST['mese']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia4.jpg">Nome</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Nome</h2>
							<ul>
								<li>Da quante lettere è formato il tuo (primo) nome? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="nome" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$nome = htmlspecialchars($_POST['nome']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia5.jpg">Invio</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Invio</h2>
							<ul>
								<li><p>Premi Invia per visualizzare il responso dell'oracolo.</p></li>
								<li><br /></li>
							</ul>
							<input type="submit" name="Invia"  value="  Invia  " size="10" onclick="location.href='frase.php'">
						</div>
					</li>
				</ul>
			</div>
			</form>
		</div>
		<div class="ac_footer">
			<span>Copyright (c) 2013 oracolodelweb.altervista.org | All rights reserved | Template by: <a href="http://www.tympanus.net">tympanus.net</a></span>
			<span style="float:right; padding-right:5px">Created by Giulio Pignatti and Luca Nisidi</span>
		</div>
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript">
		(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
		</script>
    </body>
 
No, è che non mi sono accorto che usi una versione vecchia di jquery.
Prova così:

HTML: 
$(document).ready(function() {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visibility':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
 
flameseeker ha scritto:
No, è che non mi sono accorto che usi una versione vecchia di jquery.
Prova così:

HTML: 
$(document).ready(function() {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visibility':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
Clicca per allargare...

Funziona!!! Grazie veramente tanto :) :)
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

D
script per far funzionare l'animazione
Risposte
4
Visite
2K
Javascript
dev
D
D
script per far funzionare l'animazione
Risposte
1
Visite
1K
Presentati al Forum
borgo italia
borgo italia
S
urgentissimo necessità di script per evitare di far visualizzare immagini "rubate"
Risposte
12
Visite
3K
Javascript
Paolo69
Paolo69
E
Script per far caricare pagine diverse
Risposte
5
Visite
2K
Javascript
jan267
jan267
A
Script per far hostare forum.. e file..
Risposte
0
Visite
1K
PHP
Ax4w3r
A
G
Comando per far partire l'esecuzione di script se c'è settato un coocky.
Risposte
2
Visite
2K
Javascript
Gigi80
G
L
Script per convertire numeri in parole
Risposte
2
Visite
2K
Javascript
Lenigmista
L
P
Passare solo alcuni parametri a script per CSV
Risposte
0
Visite
918
PHP
Phelps
P
B
javascript per problemi con pdf e Safari
Risposte
0
Visite
3K
Javascript
bibliofila
B
F
Convertire JavaScript per la compatibilità nei browser obsoleti
Risposte
0
Visite
1K
Javascript
fede220
F
M
Errore JavaScript per php [objeto HTMLParagraphElement]
Risposte
0
Visite
1K
PHP
manoodin
M
D
Javascript per il download dei dati
Risposte
0
Visite
1K
Javascript
daveBuc
D
felino
Script PHP per leggere un file JSON. autenticazione?
Risposte
4
Visite
2K
PHP
felino
felino
claudio_lorenzo
[Javascript] aiuto su jquery per calcolo altezze dom
Risposte
1
Visite
1K
Javascript
Tommy03
Tommy03
alexice51
proggrammi per scrivere in javascript?
Risposte
3
Visite
2K
Javascript
Leonardo Scotti
L
K
[javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico
Risposte
1
Visite
1K
Javascript
macus_adi
macus_adi
romeocharly
[PHP] Script per rinominare in automatico le immagini inviate da ftp
Risposte
0
Visite
1K
PHP
romeocharly
romeocharly
A
[PHP] Script con array con numeri che iniziano per 00
Risposte
2
Visite
2K
PHP
aiellog00
A
D
[Javascript] pulsanti per comandi shell con php e ajax
Risposte
7
Visite
5K
Ajax
Davide75
D
K
Come eliminare attributi regex per validazione con javascript
Risposte
0
Visite
1K
Javascript
klomax
K
Alto Basso