[JavaScript] Descrizione a comparsa per ogni campo inputbox

16-04-2010, 18.30.15

Ciao a tutti,
avrei bisogno di uno script che mi permetta di visualizzare la descrizione di un determinato inputbox quando ci clicco per immettere del testo.
Ho già guardato su siti come html.it trovando qualcosa di simile ma che non fa al caso mio.
Io vorrei che la descrizione di ogni inputbox avvenga in un div in fondo al form.
Per intenderci, vorrei qualcosa di simile come nel sito di Hotmail che ti aiuta nella compilazione del modulo quando devi creare una nuova email, solo che ogni suggerimento lo vorrei in un determinato div in fondo a tutto il modulo.

Spero in un vostro aiuto.

Cordiali saluti.
Ivan

**sevenjeak** · 17-04-2010, 10.05.44

Se la descrizione da visualizzare si trova subito dopo l'input dovresti fare una funzione del genere ( premettendo che l'input abbia un sua id ):

Codice HTML:

<script type="text/javascript">
   function nome_funzione(id) 
  {
      var nextNode = document.getElementById(id).nextSibling; /* Non seleziona il tag con id "id", ma il tag successivo presente allo stesso livello*/
  
      nextNode.style.display = "block";
  }
</script>

Questa funzione permette di selezionare il fratello ( il nodo successivo presente allo stesso livello ) e di renderlo visibile.

Ti consiglio questa guida se vuoi controllare i nodi html con javascript:
http://jblog.it/2009/05/25/tecniche-...-nodi_492.html

Per inserire tutti i suggerimenti in fondo al div, non mi viene altro che questo codice:

Codice HTML:

<script type="text/javascript">
   function nome_funzione(suggerimento) 
  {
      var div = document.getElementById(div).nextSibling; /* Div dove dovrebbero apparire i suggerimenti */ 
      
      div.innerHTML = sugg;
  }
</script>

Ovviamente alla funzione passo il contenuto che deve avere il div per i suggerimento

17-04-2010, 12.39.21

Ciao, ti ringrazio per la tua risposta.
Io ho provato ad utilizzare il secondo codice scritto da te ma senza ottenere risultati

Io ho fatto così:

Codice HTML:

<script type="text/javascript">
   function Help(name)  /* dove (name) è l'id dell'inputbox */ 
  {
      var div = document.getElementById(descr).nextSibling; /* Div dove dovrebbero apparire i suggerimenti */ 
      
      div.innerHTML = In questo campo devi inserire il tuo nome;
  }
</script>

<form>
<input type="text" id="name" name="nome" onclick="Help()" />
<br />
<br />
<div id="descr" style="width:300px;"></div>
</form>

Di sicuro avrò fatto confusione io e mi sto perdendo in un bicchiere d'acqua!

Saluti.
Ivan

**EuroSalute** · 17-04-2010, 14.42.25

Io ho fatto in altro modo, puoi guardare come ho fatto qui a questa pagina:

http://eurosalute.altervista.org/too...izio_poll.html

ma non so se a te va bene così.....

**javascripter** · 17-04-2010, 14.48.46

Beh prima di tutto hai fatto degli errori di sintassi.
Comunque puoi provare a fare qualcosa tipo:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT" lang="it-IT">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
/* <![CDATA[ */
function show(obj, text) {
	// definizione di alcune variabili
	var
		left = obj.offsetLeft,
		top = obj.offsetTop,
		msg = document.getElementById('msg'),
		style = (window.getComputedStyle) ? window.getComputedStyle(obj, '') : obj.currentStyle,
		h = parseInt(style.height + 0)
	;

	if(!msg) { // se non esiste un elemento con id impostato a msg, lo creo
		msg = document.createElement('div');
		msg.id = 'msg';
		document.body.appendChild(msg);
	}

	// imposto il testo e altre cose
	msg.innerHTML = text;
	msg.style.left = left + 'px';
	msg.style.top = (top + h + 6) + 'px';
	msg.style.display = 'block';

	obj.onblur = function() { // quando l'input perde il focus, nascondo il div
		msg.style.display = 'none';
	}
}
/* ]]> */
</script>
<style type="text/css">
/* <![CDATA[ */
#msg {
	display: none;
	position: absolute;
	border: 1px solid blue;
	width: 200px;
	cursor: default;
}
/* ]]> */
</style>
</head>
<body>
Esempio, clicca sull'input text:<br /><br />
Nome: <input type="text" name="name" onfocus="show(this, 'Inserisci il tuo nome')" /><br /><br />
Email: <input type="text" name="email" onfocus="show(this, 'Inserisci una email')" />
</body>
</html>

La funzione show accetta due argomenti il primo, l'elemento nel tuo caso l'input dove si clicca quindi puoi lasciare semplicemente this il secondo invece la descrizione.

L'ho provato su Firefox e funziona.

**EuroSalute** · 17-04-2010, 15.02.24

Ma dici a me?

dove ho fatto errori di sintassi su questa pagina!?
http://eurosalute.altervista.org/too...izio_poll.html

Guarda se così ti piace, così ti posto il codice....

**javascripter** · 17-04-2010, 15.06.46

Originalmente inviato da EuroSalute

Ma dici a me?

No! Scusa se non ho fatto riferimento comunque dicevo a TurkoSoft
P.S. Comunque io non ho letto, bene. Il mio codice non mostra un box in fondo al form ma sotto ogni input!

**EuroSalute** · 17-04-2010, 15.37.19

si, effetivamente TurkoSoft ha chiesto un div in fondo al form......

17-04-2010, 15.53.25

@ Eurosalute: si perfetto, il tuo script è quello che cerco, mi potresti postare il codice? :)

@ Javascripter: ti ringrazio per il tuo aiuto, in ogni caso terrò lo stesso in considerazione il tuo codice :)

**EuroSalute** · 17-04-2010, 16.07.27

allora inserisci il seguente javascript tra <head> e </head>:
ps: ci sono delle parti del codice non utilizzate la funzione moveObject (perchè pensavo di spostare il popup inserendo un ? per ogni campo form):

Importante***** ho corretto alcune cose

Codice HTML:

<script language="javascript">

function showPopup (targetObjectId, eventObj, msg) {
	if(msg == undefined) {msg="Errore";}
	
	helpbox.value = msg;
  
	if(eventObj) {
		
	// hide any currently-visible popups
	//window.currentlyVisiblePopup = targetObjectId;
	hideCurrentPopup();
	
	// stop event from bubbling up any farther
	eventObj.cancelBubble = true;
	
	// move popup div to current cursor position
	// (add scrollTop to account for scrolling for IE)
	//var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0);
	//var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0);
	//moveObject(targetObjectId, newXCoordinate, newYCoordinate);
	
	// and make it visible	
	if( changeObjectVisibility(targetObjectId, 'visible') ) {
	    // if we successfully showed the popup
	    // store its Id on a globally-accessible object
	    window.currentlyVisiblePopup = targetObjectId;
	    return true;
	} else {
	    // we couldn't show the popup, boo hoo!
	    return false;
	}
    } else {
	// there was no event object, so we won't be able to position anything, so give up
	return false;
    }
} // showPopup

function hideCurrentPopup() {
    // note: we've stored the currently-visible popup on the global object window.currentlyVisiblePopup
    if(window.currentlyVisiblePopup) {
	changeObjectVisibility(window.currentlyVisiblePopup, 'hidden');
	window.currentlyVisiblePopup = false;
    }		
		
} // hideCurrentPopup

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.left = newXCoordinate;
	styleObject.top = newYCoordinate;
	return true;
    } else {
	// we couldn't find the object, so we can't very well move it
	return false;
    }
} // moveObject


// setup an event handler to hide popups for generic clicks on the document
// document.onclick = hideCurrentPopup();

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject


//-->
</script>

ora nel body se non vuoi far visualizzare il popup all'apertura della pagina:

Codice HTML:

<body onload="changeObjectVisibility('quickhelp', 'hidden');">

ora per ogni campo form aggiungi on focus in questo modo: qui ci sono delle correzzioni (return !showPopup....)

Codice HTML:

onfocus="return !showPopup('quickhelp','event','QUI INSERISCI IL TUO TESTO PER HELP');">

ora dove vuoi in fondo al form :

Codice HTML:

<div class="" id="quickhelp" onclick="event.cancelBubble = true;">
<div align="center"><b class="" style="text-align:center;">Piccolo Aiuto</b><br>
<textarea cols=25 rows=5 style="border: none" id="helpbox"></textarea><br>
<a class="" href="#" onclick="hideCurrentPopup(); return false;"><small>Chiudi Dialogo</small></a>
</div></div>

17-04-2010, 16.31.06

ciao, cosa hai corretto?
Perchè a me lo script non funziona

Grazie del tuo aiuto :)

**javascripter** · 17-04-2010, 16.51.48

Prova con qualcosa di semplice:

Codice:

function show(text) {
	var msg = document.getElementById('msg');
	msg.innerHTML = text;

	if(msg.style.display != 'block') {
		msg.style.display = 'block';
	}
}

Ti crei un div con id msg e su ogni input richiami show, ad esempio:

Codice HTML:

<input type="text" name="nome" onfocus="show('Inserisci il tuo nome')" /><br />
<input type="text" name="email" onfocus="show('Inserisci una email')" />
<br /><br />
<div id="msg" style="display: none; width: 300px"></div> <!-- magari con i css, gli aggiungi tutte le proprietà che vuoi, basta che ci sia sempre display impostato a none -->

**EuroSalute** · 17-04-2010, 17.12.11

ti riscrivo il codice perchè con i.e. non funzionava, ora funziona !!!

ho divuto aggiungere la variabile helpbox alla funzione showPopup:

Codice HTML:

<script language="javascript">

function showPopup (targetObjectId, eventObj, helpbox, msg) {
	
	if(msg == undefined) {msg="Errore";}
	
	helpbox.value = msg;
	
	if(eventObj) {
		
	// hide any currently-visible popups
	//window.currentlyVisiblePopup = targetObjectId;
	hideCurrentPopup();
	
	// stop event from bubbling up any farther
	eventObj.cancelBubble = true;
	
	// move popup div to current cursor position
	// (add scrollTop to account for scrolling for IE)
	//var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0);
	//var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0);
	//moveObject(targetObjectId, newXCoordinate, newYCoordinate);
	
	// and make it visible	
	if( changeObjectVisibility(targetObjectId, 'visible') ) {
	    // if we successfully showed the popup
	    // store its Id on a globally-accessible object
	    window.currentlyVisiblePopup = targetObjectId;
	    return true;
	} else {
	    // we couldn't show the popup, boo hoo!
	    return false;
	}
    } else {
	// there was no event object, so we won't be able to position anything, so give up
	return false;
    }
} // showPopup

function hideCurrentPopup() {
    // note: we've stored the currently-visible popup on the global object window.currentlyVisiblePopup
    if(window.currentlyVisiblePopup) {
	changeObjectVisibility(window.currentlyVisiblePopup, 'hidden');
	window.currentlyVisiblePopup = false;
    }		
		
} // hideCurrentPopup

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.left = newXCoordinate;
	styleObject.top = newYCoordinate;
	return true;
    } else {
	// we couldn't find the object, so we can't very well move it
	return false;
    }
} // moveObject


// setup an event handler to hide popups for generic clicks on the document
//document.onclick = hideCurrentPopup();

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject


//-->
</script>

input campo form per onfocus:

Codice HTML:

<input size="30" name="name" maxlength="45" onfocus="return !showPopup('quickhelp',event,hbox,'Inserisci il tuo Nome per favore!');">

DEVI SCRIVERE ONFOCUS COME E' SCRITTO:
onfocus="return !showPopup('quickhelp',event,hbox,'QUI INSERISCI IL TUO TESTO HELP');"

ora dove vuoi in fondo al form :

Codice HTML:

<div class="" id="quickhelp" onclick="event.cancelBubble = true;">

<div align="center"><b class="" style="text-align:center;">Piccolo Aiuto</b><br>

<textarea cols=25 rows=5 style="border: none" id="hbox"></textarea><br>

<a class="" href="#" onclick="hideCurrentPopup(); return false;"><small>Chiudi Dialogo</small></a>

</div>

</div>

L'ho provato con ie8 e firefox ...FUNZIONA BENISSIMO!!!

ps: guarda il codice completo dalla pagina:
http://eurosalute.altervista.org/too...izio_poll.html

Il mio codice sarà più complesso, però ti permette di definire un id diverso per ogni campo form e quindi di posizionare l'helpbox(o più helpbox) dove vuoi nella pagina, esempio:

Per il div definisco id=emailhelp e visibility: hidden;position:absolute;
Per textarea definisco id=emailhbox

Codice HTML:

<tr>
<td> Tuo Indirizzo email:</td>
<td>
<input size="30" name="email" maxlength="45" onfocus="return !showPopup('emailhelp',event,emailhbox,'Inserisci un tuo Indirizzo Email per favore! Questo input non è obbligatorio.');">
</td>
</tr>
<tr>
<td></td>
<td>

<div class="" id="emailhelp" onclick="event.cancelBubble = true;" style="visibility: hidden;position:absolute;">
<div align="center"><b class="blueheadline" style="text-align:center;">Piccolo Aiuto</b><br>
<textarea cols=25 rows=5 style="border: none" id="emailhbox"></textarea><br>
<a class="" href="#" onclick="hideCurrentPopup(); return false;"><small>Chiudi Dialogo</small></a>
</div></div>

</td>
</tr>

Guarda il codice completo dalla pagina:
http://eurosalute.altervista.org/too...izio_poll.html

18-04-2010, 12.57.14

Originalmente inviato da javascripter

Prova con qualcosa di semplice:

Codice:

function show(text) {
	var msg = document.getElementById('msg');
	msg.innerHTML = text;

	if(msg.style.display != 'block') {
		msg.style.display = 'block';
	}
}

Ti crei un div con id msg e su ogni input richiami show, ad esempio:

Codice HTML:

<input type="text" name="nome" onfocus="show('Inserisci il tuo nome')" /><br />
<input type="text" name="email" onfocus="show('Inserisci una email')" />
<br /><br />
<div id="msg" style="display: none; width: 300px"></div> <!-- magari con i css, gli aggiungi tutte le proprietà che vuoi, basta che ci sia sempre display impostato a none -->

Perfetto!

Ti ringrazio moltissimo, mi va benone.
Ti volevo chiedere, sarebbe possibile aggiungere una sorta di effetto dissolvenza per il testo?
Cioè che cambiando da un'inputbox ad un altro, il testo si dissolve in entrata e uscita.
Credo ci voglia l'ausilio di javascript no?

Se è troppo complicato, lascia perdere :)

@Eurosalute: ti ringrazio per il tuo tempo dedicatomi. Il tuo script è buono, però è molto complesso. Tanto a me serve solo per una pagina :)

Ciao a tutti

**javascripter** · 18-04-2010, 18.49.18

Vedi se va bene qualcosa del genere:

Codice:

var speeds = { // definiamo le varie velocita
	slow: 90,
	medium: 45,
	fast: 25
};

function fadeOut(id, speed, cb) {
	if(!id)
		return false;

	var ele = (typeof id === 'object') ? id : document.getElementById(id) || document.all[id];

	if(!ele) {
		return false;
	}

	var styles = ele.style;

	if(window.getComputedStyle) {
		styles = window.getComputedStyle(ele, null);
	} else if(ele.currentStyle) {
		styles = ele.currentStyle;
	}

	if(styles.visibility === 'hidden' || styles.display === 'none' || ele.fading === true)
		return false;

	ele.style.zoom = 1;
	ele.fading = true;

	var timer = 0; // ci serve per aumentare gradualmente la velocita
	speed = speed ? speeds[speed] || speed : speeds.slow; // imposta la velocita con vari controlli...

	for(var i = 0; i <= 10; i++) {
		setTimeout(function() { i--; change_style(ele, 'opacity', i); }, timer * speed); // da l'effetto dissolvenza
		timer++;
	}

	if(typeof cb === 'function')
		setTimeout(cb, timer * speed);

	return true;
}


function fadeIn(id, speed, cb) {
	if(!id)
		return false;

	var ele = (typeof id === 'object') ? id : document.getElementById(id) || document.all[id];

	if(!ele) {
		return false;
	}

	var styles = ele.style;

	if(window.getComputedStyle) {
		styles = window.getComputedStyle(ele, null);
	} else if(ele.currentStyle) {
		styles = ele.currentStyle;
	}

	//if(styles.display === 'none') {
		ele.style.visibility = 'hidden';
		ele.style.display = 'inline-block';
	//}

	if(styles.visibility !== 'hidden' || ele.fading === true)
		return false;

	ele.style.zoom = 1;
	ele.fading = true;

	var timer = 0; // ci serve per aumentare gradualmente la velocita
	speed = speed ? speeds[speed] || speed : speeds.slow; // imposta la velocita con vari controlli...

	for(var i = 10; i >= 0; i--) {
		setTimeout(function() { i++; change_style(ele, 'opacity', i); }, timer * speed); // da l'effetto dissolvenza
		timer++;
	}

	if(typeof cb === 'function')
		setTimeout(cb, timer * speed);

	return true;
}

function change_style(ele, p, v) { // questa funzione la useremo anche per altri effetti!
	switch(p) {
		case 'opacity':
			ele.style.opacity = v / 10; // standard CSS3
			ele.style.MozOpacity = v / 10; // firefox < 3.5
			ele.style.filter = 'alpha(opacity=' + (v * 10) + ')'; // ie
			ele.fading = true;

			if(v < 1) {
				ele.style.visibility = 'hidden';
				ele.fading = false;
			} else if(v >= 10) {
				ele.style.visibility = 'visible';
				ele.fading = false;
			} else
				ele.style.visibility = 'visible';
		break;
	}
}


function show(text) {
	var msg = document.getElementById('msg'), t = msg.getElementsByTagName('span').item(0);

	if(t.innerHTML.length > 0) {
		fadeOut(t, 'medium', function() { t.innerHTML = text; fadeIn(t, 'medium') });
	} else {
		t.innerHTML = text;
		fadeIn(t, 'medium');
	}

	if(msg.style.display != 'block') {
		msg.style.display = 'block';
	}
}

All'interno del div crei un tag span per l'effetto fade:

Codice HTML:

<div id="msg" style="display: none; width: 300px"><span></span></div>

18-04-2010, 20.12.49

Sei un grande!
Complimenti veramente

**EuroSalute** · 18-04-2010, 20.25.48

Io ho fatto l'effetto dissolvenza in altro modo, penso più semplice, l'esempio è a questa pagina:

http://eurosalute.altervista.org/too...poll_fade.html

Se sei interessato al codice javascript che ho usato, lo puoi prelevare direttamente dalla pagina...

ciao

18-04-2010, 21.00.42

Ok grazie anche del tuo aiuto

Ciao :)

**EuroSalute** · 19-04-2010, 19.52.46

Scusate ma ho risistemato il codice javascript per l'effetto fadein fadeout, che avevo scritto in fretta....ora l'effetto è puro (prima il dialog-box si apriva del tutto per un attimo per poi eseguire l'effetto fade), per chi fosse interessato a questa pagina per il codice nuovo:

http://eurosalute.altervista.org/too...fade_puro.html

grazie....

ciao

Discussione: [JavaScript] Descrizione a comparsa per ogni campo inputbox

LinkBack

Strumenti discussione

Display

[JavaScript] Descrizione a comparsa per ogni campo inputbox

Regole di scrittura