input veld met value die verdwijnt.
Hoe kan ik een input veld maken met een value die verdwijnt wanneer men erop klikt om het input veld in te vullen? (doorgaans wordt de value dan in het lichtgrijs weer gegeven)
BvD
Onfocus="this.value=''"
Hier de complete code, zo uit Dreamweaver overgenomen...
yes ok.. maar hoe pas ik de letterkleur van de values aan dan? Wanneer er een waarde wordt ingevuld wil ik wel dat deze zwart wordt.
'css' is het toverwoord.
zat idd ook al in die hoek te denken. Maar hoe maak ik dan onderscheid tussen de value en de ingevulde waarde?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
input.grijs {
color: #999;
background: #fff;
}
input.zwart {
color: #000;
background: #fff;
}
color: #999;
background: #fff;
}
input.zwart {
color: #000;
background: #fff;
}
In je HTML
rest van de attributen voor input zelf invullen
In je JS
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function do_input (obj) {
if (obj.value =='Your message') {
obj.className = 'grijs';
}
else {
obj.className = 'zwart';
}
}
if (obj.value =='Your message') {
obj.className = 'grijs';
}
else {
obj.className = 'zwart';
}
}
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
<input onkeyup="do_input(this);" name="link" type="text" size="9" value="charge nr." Onfocus="this.value=''"; >
is het juiste? of niet?
de js heb ik gewoon letterlijk overgenomen in in mn head gezet. klopt ook toch?
En kan er ook een scriptje aan geplakt worden dat zodra buiten het input kader geklikt wordt en er is niets ingevuld dat de standaard value dan weer verschijnt?
Gewijzigd op 01/01/1970 01:00:00 door frank
Gewoon uitproberen, zou ik zeggen. Ik heb de code uit mijn hoofd gedaan en niet getest.
jah ik ben dus al n tijdje aan t proberen, maar alles blijft zwart
1) Als de standaardwaarde ingevuld is, is de tekst grijs
2) Als er iets anders ingevuld is, is de tekst zwart
3) Als de input de focus krijgt, en de tekst is gelijk aan "charge nr.", dan de input leegmaken
4) Als de input de focus verliest, en hij is leeg, dan de tekst "charge nr." invullen
bedoel je het zo?
klopt!
Ik zal een online voorbeeldje voor je maken. Momentje.
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
40
41
42
43
44
45
46
47
48
49
50
51
52
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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Input field tricks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init () {
var _veld1 = document.getElementById ('veld1');
_veld1.onfocus = function () {
return handle_focus (this);
}
_veld1.onblur = function () {
return handle_blur (this);
}
}
function handle_focus (obj) {
if (obj.value == 'charge nr.') {
obj.value = '';
obj.className = 'zwart';
}
}
function handle_blur (obj) {
if (obj.value == '') {
obj.value = 'charge nr.';
obj.className = 'grijs';
}
}
window.onload = init;
</script>
<style type="text/css">
input.grijs {
color: #999;
background: #fff;
}
input.zwart {
color: #000;
background: #fff;
}
</style>
</head>
<body>
<form method="post" action="#">
<p>
<label for="veld1">veld 1:</label>
<input id="veld1" name="veld1" type="text" class="grijs" value="charge nr.">
<input type="submit" value="go">
</p>
</form>
</body>
</html>
<html>
<head>
<title>Input field tricks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init () {
var _veld1 = document.getElementById ('veld1');
_veld1.onfocus = function () {
return handle_focus (this);
}
_veld1.onblur = function () {
return handle_blur (this);
}
}
function handle_focus (obj) {
if (obj.value == 'charge nr.') {
obj.value = '';
obj.className = 'zwart';
}
}
function handle_blur (obj) {
if (obj.value == '') {
obj.value = 'charge nr.';
obj.className = 'grijs';
}
}
window.onload = init;
</script>
<style type="text/css">
input.grijs {
color: #999;
background: #fff;
}
input.zwart {
color: #000;
background: #fff;
}
</style>
</head>
<body>
<form method="post" action="#">
<p>
<label for="veld1">veld 1:</label>
<input id="veld1" name="veld1" type="text" class="grijs" value="charge nr.">
<input type="submit" value="go">
</p>
</form>
</body>
</html>
online voorbeeld op jankoehoorn.nl
Alleen heb ik wel het volgende probleem. Door de window.onload = init; loopt een ander item op mn site vast doordat die in de body stond
<body ONLOAD="MaakKalender()"> Hoe kan ik deze 2 nu combineren?
edit:
haha precies op t zelfde tijdstip reageren. Thanks iig voor je hulp!!
K heb m zo gemaakt:
<body onload="MaakKalender(),init()">
Gewijzigd op 01/01/1970 01:00:00 door frank
Zo kan het ook, maar ik raad je mijn manier aan. Het voordeel daarvan is namelijk dat je je JavaScript in een extern bestand zou kunnen zetten. Je houdt je JS gescheiden van je HTML en daardoor wordt je site gemakkelijker te onderhouden. Je kunt bijvoorbeeld 1 JavaScript op meer pagina's includen.
Enn nog ff n klein vraagje: als ik meerdere velden gebruik kan ik die dan zo gebruiken:
function init () {
var _veld1 = document.getElementById ('veld1','veld2');
?
Je kunt ook automatisch alle velden die aan bepaalde voorwaarden voldoen, doorlopen met JavaScript. Als je dat nodig hebt, moet je nog ff een seintje geven.