Input type texte
Résolu/Fermé
ben85350
Messages postés
610
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
2 avril 2013
-
21 juil. 2008 à 12:37
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 - 21 juil. 2008 à 22:56
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 - 21 juil. 2008 à 22:56
A voir également:
- Input type texte
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
- Incompatibilité de type vba ✓ - Forum Programmation
- Deflouter texte - Forum Logiciels
- Transcription audio en texte word gratuit - Guide
2 réponses
gaerebut
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
171
21 juil. 2008 à 13:06
21 juil. 2008 à 13:06
Salut!
Alors tout d'abord, pour que le texte disparaisse, il suffis juste de mettre un petit code javascript dans l'événement onclick.
Bon je te mets le code avec un petit bonus (lol) : Si on click et qu'il y a le texte "Rechercher", il disparait. Si il y a autre chose, il disparrait pas. Si il y a rien dans le textbox et qu'on clique ailleurs, le texte "Rechercher" s'inscrit dedans ou sinon non.
Plus clair avec cet exemple :
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
Voila,
puis au niveau du entré, j'ai jamais essayé avec juste la touche entré et à mon avis c'est déconseillé (Beaucoup de gens vont rester planter devant en cherchant le bouton ... XD) Mais bon ...
Heu ben sinon je vois pas beaucoup de solutions ...
A vrai dire, j'en est 2 :
Solution 1:
<form action="rechercher.php" method="post" />
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
</form>
Solution 2:
<form action="rechercher.php" method="post" />
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
<input type="button" value="" style="display:none; width: 1px; height: 1px;"
</form>
Voila, lol
La deuxième est un peu voilente mais a mon avis c'est celle qui a le plus de chance de marcher...
Aller, a+ et repose moi tes problème si t'en a par la suite ;)
A+
Alors tout d'abord, pour que le texte disparaisse, il suffis juste de mettre un petit code javascript dans l'événement onclick.
Bon je te mets le code avec un petit bonus (lol) : Si on click et qu'il y a le texte "Rechercher", il disparait. Si il y a autre chose, il disparrait pas. Si il y a rien dans le textbox et qu'on clique ailleurs, le texte "Rechercher" s'inscrit dedans ou sinon non.
Plus clair avec cet exemple :
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
Voila,
puis au niveau du entré, j'ai jamais essayé avec juste la touche entré et à mon avis c'est déconseillé (Beaucoup de gens vont rester planter devant en cherchant le bouton ... XD) Mais bon ...
Heu ben sinon je vois pas beaucoup de solutions ...
A vrai dire, j'en est 2 :
Solution 1:
<form action="rechercher.php" method="post" />
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
</form>
Solution 2:
<form action="rechercher.php" method="post" />
<input type="text" value="Rechercher" name="recherche" size="18" Onclick="javascript: if(this.value == 'Rechercher')this.value=''" Onblur="javascript: if(this.value == '')this.value='Rechercher'" />
<input type="button" value="" style="display:none; width: 1px; height: 1px;"
</form>
Voila, lol
La deuxième est un peu voilente mais a mon avis c'est celle qui a le plus de chance de marcher...
Aller, a+ et repose moi tes problème si t'en a par la suite ;)
A+
gaerebut
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
171
21 juil. 2008 à 22:56
21 juil. 2008 à 22:56
heuuu je m'était jamais posé la question mais c'est vrai je peux pas te dire ^^
Sinon moi je te conseil un truc plus stylé du genre comme facebook fait pour chercher un contact !
ça ce nomme un livesearch !
C'est en ajax et c'est assez simple a implémenter et c'est surtout beaucoup plus jolie vu que cela recherche a chaque frappe sur le clavier ET SURTOUT sans rafraichir la page !!!
Bon aller, comme c'est mon jour de bontée, je vais tout te donnée pour que tu n'est plus qu'a recopier... lol
C'est encore bonus je sais mais bon ... je suis gentil j'y peux rien XD
Heu si tu veux des explications, tu me demandes et je referai un post pour t'expliquer (^_^)'
--------------------------------------------------------------------------------------------------------------------------------
Besoin de 3 pages contenu dans le même dossier (pour le css je te laisse te débrouiller ^^):
index.php
fonction.js
recherche.php
style.css (bonus de bonus XD)
On va simuler un moteur de recherche, donc on va créer vite fait une petit base nommé "test" et on va la remplir avec 2 table dont voici le code :
-----------------------------------------------------------------
-----------------------------------------------------------------
Base de donnée
-----------------------------------------------------------------
-----------------------------------------------------------------
--
-- Structure de la table `villes`
--
CREATE TABLE `villes` (
`id` int(11) NOT NULL auto_increment,
`id_ref` int(11) NOT NULL,
`ville` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=30 ;
--
-- Contenu de la table `villes`
--
INSERT INTO `villes` (`id`, `id_ref`, `ville`) VALUES
(1, 1, 'Paris'),
(2, 1, 'Le Havre'),
(3, 1, 'Marseille'),
(4, 1, 'Bordeaux'),
(5, 1, 'Lyon'),
(6, 1, 'Ajaccio'),
(7, 2, 'Madrid'),
(8, 2, 'Barcelone'),
(9, 2, 'Valence'),
(10, 2, 'Tolede'),
(11, 2, 'Cadix'),
(12, 2, 'Lugo'),
(13, 3, 'Roma'),
(14, 3, 'Napoli'),
(15, 3, 'Bologna'),
(16, 3, 'Genova'),
(17, 3, 'Palermo'),
(18, 4, 'Berlin'),
(19, 4, 'Munich'),
(20, 4, 'Bonn'),
(21, 4, 'Cologne'),
(22, 4, 'Hambourg'),
(23, 4, 'Franckfort'),
(24, 4, 'Stuttgart'),
(25, 5, 'Bruxelles'),
(26, 5, 'Antwerpen'),
(27, 5, 'Bruges'),
(28, 5, 'Gent'),
(29, 5, 'Liege');
--
-- Structure de la table `pays`
--
CREATE TABLE `pays` (
`id` int(11) NOT NULL auto_increment,
`nom` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
--
-- Contenu de la table `pays`
--
INSERT INTO `pays` (`id`, `nom`) VALUES
(1, 'France'),
(2, 'Espagne'),
(3, 'Italie'),
(4, 'Allemagne'),
(5, 'Belgique');
-----------------------------------------------------------------
-----------------------------------------------------------------
Base de donnée ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page index.php
-----------------------------------------------------------------
-----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww/w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www/w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="fonction.js" type="text/javascript"></script>
</head>
<body>
<div id="recherche">
<input type="Text" value="Votre Recherche ..." size="20px" Onclick="javascript: if(this.value == 'Votre Recherche ...')this.value='';" Onblur="javascript: if(this.value == '')this.value='Votre Recherche ...';" name="recherche" id="recherche" onkeyup="showTown(this.value)" autocomplete="off"/>
</div>
<div id="resultat">
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$pays=mysql_query("SELECT * FROM pays");
while ($donnees1 = mysql_fetch_array($pays) )
{
?>
<div id="pays">
<?php
echo $donnees1['nom'];
?>
</div>
<div id="villes_<?php echo $donnees1['nom']; ?>">
<?php
$ville=mysql_query("SELECT * FROM villes WHERE id_ref=" . $donnees1['id']);
while ($donnees2 = mysql_fetch_array($ville) )
{
?>
<div id="villes" onclick="javascript: window.location.href ='index.php?ville=<?php echo $donnees2['ville']; ?>'">
<?php
echo $donnees2['ville'];
?>
</div>
<?php
}
?>
</div>
<?php
}
mysql_close();
?>
</div>
</body>
</html>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page index.php ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
Quelques explications: Pour afficher aucun résultat par défault, ne met rien entre <div id="resultat"> et le tout dernier </div>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page fonction.js
-----------------------------------------------------------------
-----------------------------------------------------------------
var xmlHttp
function showTown(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Votre navigateur ne supporte pas le HTTP Request")
return
}
var url="recherche.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("resultat").innerHTML=xmlHttp.responseText
}
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
-----------------------------------------------------------------
-----------------------------------------------------------------
Page fonction.js ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page recherche.php
-----------------------------------------------------------------
-----------------------------------------------------------------
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Connexion impossible : ' . mysql_error());
}
mysql_select_db("test", $con);
$sql="SELECT * FROM `villes` WHERE `ville` LIKE '" . $q . "%' ORDER BY `id_ref`";
$result = mysql_query($sql);
?>
<?php
while($row = mysql_fetch_array($result))
{
$id_ref_new = true;
if ($row['id_ref'] == $id_ref_precedent)
{
$id_ref_new = false;
}
$sql2="SELECT * FROM `pays` WHERE id = '" . $row['id_ref'] . "'";
$result2= mysql_query($sql2);
$row2 = mysql_fetch_array($result2);
if ($id_ref_new)
{
?>
</div>
<div id="pays">
<?php
echo $row2['nom'];
?>
</div>
<div id="villes_<?php echo $row2['nom']; ?>">
<?php
}
?>
<div id="villes" onclick="javascript: window.location.href ='index.php?ville=<?php echo $row['ville']; ?>'">
<?php
$longueur = strlen($q);
$text_debut = '<strong>' . $q . '</strong>';
echo $text_debut . substr($row['ville'],$longueur);
?>
</div>
<?php
$id_ref_precedent = $row['id_ref'];
}
?>
<?php
mysql_close($con);
?>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page recherche.php ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page style.css
-----------------------------------------------------------------
-----------------------------------------------------------------
#recherche {
margin-top:5px;
}
#resultat{
margin-left: auto;
margin-top: 5px;
padding-right: 2px;
overflow: auto;
font-style:verdana;
height: 565px;
border: 1px solid #AEB8C4;
}
#pays {
font-size:20px;
font-style:bold;
background-color: #657998;
border-top: 1px solid #AEB8C4;
border-bottom: 1px solid #AEB8C4;
padding-bottom: 6px;
padding-top: 6px;
text-align: left;
padding-left: 10px;
}
#villes {
background-color:#C5C5C5;
border-bottom: 1px dashed gray;
padding-bottom: 4px;
padding-top: 4px;
text-align: left;
padding-left: 35px;
}
#villes:hover {
background-color: #9FA09E;
cursor: pointer;
}
-----------------------------------------------------------------
-----------------------------------------------------------------
Page style.css ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
Bon ok, au niveau css c'est pas génial mais c'est juste pour que ce soit plus potable et montrer les possibilité par la suite ^^
Bon ben voila, fait moi signe si ça ne marche pas mais ça, c'est le top du top ;)
A+ et bonne prog
Sinon moi je te conseil un truc plus stylé du genre comme facebook fait pour chercher un contact !
ça ce nomme un livesearch !
C'est en ajax et c'est assez simple a implémenter et c'est surtout beaucoup plus jolie vu que cela recherche a chaque frappe sur le clavier ET SURTOUT sans rafraichir la page !!!
Bon aller, comme c'est mon jour de bontée, je vais tout te donnée pour que tu n'est plus qu'a recopier... lol
C'est encore bonus je sais mais bon ... je suis gentil j'y peux rien XD
Heu si tu veux des explications, tu me demandes et je referai un post pour t'expliquer (^_^)'
--------------------------------------------------------------------------------------------------------------------------------
Besoin de 3 pages contenu dans le même dossier (pour le css je te laisse te débrouiller ^^):
index.php
fonction.js
recherche.php
style.css (bonus de bonus XD)
On va simuler un moteur de recherche, donc on va créer vite fait une petit base nommé "test" et on va la remplir avec 2 table dont voici le code :
-----------------------------------------------------------------
-----------------------------------------------------------------
Base de donnée
-----------------------------------------------------------------
-----------------------------------------------------------------
--
-- Structure de la table `villes`
--
CREATE TABLE `villes` (
`id` int(11) NOT NULL auto_increment,
`id_ref` int(11) NOT NULL,
`ville` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=30 ;
--
-- Contenu de la table `villes`
--
INSERT INTO `villes` (`id`, `id_ref`, `ville`) VALUES
(1, 1, 'Paris'),
(2, 1, 'Le Havre'),
(3, 1, 'Marseille'),
(4, 1, 'Bordeaux'),
(5, 1, 'Lyon'),
(6, 1, 'Ajaccio'),
(7, 2, 'Madrid'),
(8, 2, 'Barcelone'),
(9, 2, 'Valence'),
(10, 2, 'Tolede'),
(11, 2, 'Cadix'),
(12, 2, 'Lugo'),
(13, 3, 'Roma'),
(14, 3, 'Napoli'),
(15, 3, 'Bologna'),
(16, 3, 'Genova'),
(17, 3, 'Palermo'),
(18, 4, 'Berlin'),
(19, 4, 'Munich'),
(20, 4, 'Bonn'),
(21, 4, 'Cologne'),
(22, 4, 'Hambourg'),
(23, 4, 'Franckfort'),
(24, 4, 'Stuttgart'),
(25, 5, 'Bruxelles'),
(26, 5, 'Antwerpen'),
(27, 5, 'Bruges'),
(28, 5, 'Gent'),
(29, 5, 'Liege');
--
-- Structure de la table `pays`
--
CREATE TABLE `pays` (
`id` int(11) NOT NULL auto_increment,
`nom` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
--
-- Contenu de la table `pays`
--
INSERT INTO `pays` (`id`, `nom`) VALUES
(1, 'France'),
(2, 'Espagne'),
(3, 'Italie'),
(4, 'Allemagne'),
(5, 'Belgique');
-----------------------------------------------------------------
-----------------------------------------------------------------
Base de donnée ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page index.php
-----------------------------------------------------------------
-----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww/w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www/w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="fonction.js" type="text/javascript"></script>
</head>
<body>
<div id="recherche">
<input type="Text" value="Votre Recherche ..." size="20px" Onclick="javascript: if(this.value == 'Votre Recherche ...')this.value='';" Onblur="javascript: if(this.value == '')this.value='Votre Recherche ...';" name="recherche" id="recherche" onkeyup="showTown(this.value)" autocomplete="off"/>
</div>
<div id="resultat">
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$pays=mysql_query("SELECT * FROM pays");
while ($donnees1 = mysql_fetch_array($pays) )
{
?>
<div id="pays">
<?php
echo $donnees1['nom'];
?>
</div>
<div id="villes_<?php echo $donnees1['nom']; ?>">
<?php
$ville=mysql_query("SELECT * FROM villes WHERE id_ref=" . $donnees1['id']);
while ($donnees2 = mysql_fetch_array($ville) )
{
?>
<div id="villes" onclick="javascript: window.location.href ='index.php?ville=<?php echo $donnees2['ville']; ?>'">
<?php
echo $donnees2['ville'];
?>
</div>
<?php
}
?>
</div>
<?php
}
mysql_close();
?>
</div>
</body>
</html>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page index.php ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
Quelques explications: Pour afficher aucun résultat par défault, ne met rien entre <div id="resultat"> et le tout dernier </div>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page fonction.js
-----------------------------------------------------------------
-----------------------------------------------------------------
var xmlHttp
function showTown(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Votre navigateur ne supporte pas le HTTP Request")
return
}
var url="recherche.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("resultat").innerHTML=xmlHttp.responseText
}
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
-----------------------------------------------------------------
-----------------------------------------------------------------
Page fonction.js ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page recherche.php
-----------------------------------------------------------------
-----------------------------------------------------------------
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Connexion impossible : ' . mysql_error());
}
mysql_select_db("test", $con);
$sql="SELECT * FROM `villes` WHERE `ville` LIKE '" . $q . "%' ORDER BY `id_ref`";
$result = mysql_query($sql);
?>
<?php
while($row = mysql_fetch_array($result))
{
$id_ref_new = true;
if ($row['id_ref'] == $id_ref_precedent)
{
$id_ref_new = false;
}
$sql2="SELECT * FROM `pays` WHERE id = '" . $row['id_ref'] . "'";
$result2= mysql_query($sql2);
$row2 = mysql_fetch_array($result2);
if ($id_ref_new)
{
?>
</div>
<div id="pays">
<?php
echo $row2['nom'];
?>
</div>
<div id="villes_<?php echo $row2['nom']; ?>">
<?php
}
?>
<div id="villes" onclick="javascript: window.location.href ='index.php?ville=<?php echo $row['ville']; ?>'">
<?php
$longueur = strlen($q);
$text_debut = '<strong>' . $q . '</strong>';
echo $text_debut . substr($row['ville'],$longueur);
?>
</div>
<?php
$id_ref_precedent = $row['id_ref'];
}
?>
<?php
mysql_close($con);
?>
-----------------------------------------------------------------
-----------------------------------------------------------------
Page recherche.php ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
Page style.css
-----------------------------------------------------------------
-----------------------------------------------------------------
#recherche {
margin-top:5px;
}
#resultat{
margin-left: auto;
margin-top: 5px;
padding-right: 2px;
overflow: auto;
font-style:verdana;
height: 565px;
border: 1px solid #AEB8C4;
}
#pays {
font-size:20px;
font-style:bold;
background-color: #657998;
border-top: 1px solid #AEB8C4;
border-bottom: 1px solid #AEB8C4;
padding-bottom: 6px;
padding-top: 6px;
text-align: left;
padding-left: 10px;
}
#villes {
background-color:#C5C5C5;
border-bottom: 1px dashed gray;
padding-bottom: 4px;
padding-top: 4px;
text-align: left;
padding-left: 35px;
}
#villes:hover {
background-color: #9FA09E;
cursor: pointer;
}
-----------------------------------------------------------------
-----------------------------------------------------------------
Page style.css ==> FIN
-----------------------------------------------------------------
-----------------------------------------------------------------
Bon ok, au niveau css c'est pas génial mais c'est juste pour que ce soit plus potable et montrer les possibilité par la suite ^^
Bon ben voila, fait moi signe si ça ne marche pas mais ça, c'est le top du top ;)
A+ et bonne prog
21 juil. 2008 à 13:28
Les solutions pour la recherche sans bouton submit fonctionne impek !
Par contre, vu que tu ma dit que c'était déconseillé je vais peut être laisser tomber, je vais réfléchir ( j'ai bien envie de faire comme le bouton rechercher de www.commentcamarche.net par contre je sais pas si la loupe est dans le input type text ou c'est une ruse :)
Merci en tout cas pour tout !
A+