Aanduiding in input field
ik ben op zoek naar een functie in js waarbij er een aanduiding in een zoekveld staat zoals "Zoekwoord" welke niet meegenomen wordt in de uitvoering van de zoekfunctie.
Dus als voorbeeld: als je bij Marktplaats kijkt staat er het woord "Postcode" cursief gedrukt in het input vled van de zoekfunctie maar deze wordt niet meegenomen bij de uitvoering van de zoekfunctie zelf.
Alvast bedankt voor de hulp.
Stephan
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
if($_POST['postcode'] != 'Postcode')
{
$zoekterm = ($_POST['postcode']);
}
?>
if($_POST['postcode'] != 'Postcode')
{
$zoekterm = ($_POST['postcode']);
}
?>
Gewijzigd op 15/02/2011 11:27:39 door Ocirina Ocirina
Als ik het terug vind, laat ik iets weten
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<input type="text" name="veld" id="veld" value="Standaard-waarde" onfocus="focusVeld()" />
<script type="text/javascript">
function focusVeld() {
// Standaard waarde verwijderen
if(document.getElementById('veld').value == 'Standaard-waarde') document.getElementById('veld') = '';
// CSS aanpassen
document.getElementById('veld').className = 'actief-veld';
}
</script>
<script type="text/javascript">
function focusVeld() {
// Standaard waarde verwijderen
if(document.getElementById('veld').value == 'Standaard-waarde') document.getElementById('veld') = '';
// CSS aanpassen
document.getElementById('veld').className = 'actief-veld';
}
</script>
het ziet er op het eertse oog goed uit en ik ga kijken of het werkt.
Stephan
Elwin Fratsloos op 15/02/2011 12:14:13:
Je zou natuurlijk even kunnen kijken hoe Marktplaats het doet
Ja, die vind ik wel interessant.
Zo doen zij het
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// watermark input fields
$('input[title]').each(function() {
if($(this).val() === '') {
$(this).val($(this).attr('title'));
$(this).css('color', '#999999');
}
$(this).focus(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val('');
$(this).css('color', '#000000');
}
});
$(this).blur(function() {
if($(this).val() === '') {
$(this).val($(this).attr('title'));
$(this).css('color', '#999999');
}
});
});
});
</script>
</head>
<body>
<div>
To do: maak input velden aan met title attribute.</br>
Die title attribute wordt het ding dat als watermerk dient<br/>
Includeer jQuery, ofwel download je jquery.js ofwel laat je het <a href="http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/">hosten door Google</a><br/>
voeg het stuk script toe
</div>
<input name="nick" title="vul je nick name in"/> Nick <br/>
<input name="email" title="vul je e-mail adres in"/> e-mail <br/>
<input name="email" /> dummy input om te tonen wanneer er geen watermark input actief is <br/>
</body>
</html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// watermark input fields
$('input[title]').each(function() {
if($(this).val() === '') {
$(this).val($(this).attr('title'));
$(this).css('color', '#999999');
}
$(this).focus(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val('');
$(this).css('color', '#000000');
}
});
$(this).blur(function() {
if($(this).val() === '') {
$(this).val($(this).attr('title'));
$(this).css('color', '#999999');
}
});
});
});
</script>
</head>
<body>
<div>
To do: maak input velden aan met title attribute.</br>
Die title attribute wordt het ding dat als watermerk dient<br/>
Includeer jQuery, ofwel download je jquery.js ofwel laat je het <a href="http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/">hosten door Google</a><br/>
voeg het stuk script toe
</div>
<input name="nick" title="vul je nick name in"/> Nick <br/>
<input name="email" title="vul je e-mail adres in"/> e-mail <br/>
<input name="email" /> dummy input om te tonen wanneer er geen watermark input actief is <br/>
</body>
</html>
Ik heb juist toegevoegd dat ook de kleur op grijs wordt gezet.
Gewijzigd op 15/02/2011 12:52:49 door Kris Peeters
Alvast bedankt.
Toevoeging op 15/02/2011 15:20:25:
Het werkt. Super bedankt voor de zoekactie bij MP Kris.
En natuurlijk de rest ook bedankt.