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
kan ik de value ook in het lichtgrijs weergeven?
Gewijzigd op 01/01/1970 01:00:00 door frank
Code (php)
1
2
3
2
3
<form name="form1" method="post" action="">
<input type="text" name="n" value="Your message" onFocus="if(this.value=='Your message')this.value='';">
</form>
<input type="text" name="n" value="Your message" onFocus="if(this.value=='Your message')this.value='';">
</form>
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
Code (php)
1
<input onkeyup="do_input(this);">
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
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?
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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);
}
MaakKalender()
}
function init () {
var _veld1 = document.getElementById ('veld1');
_veld1.onfocus = function () {
return handle_focus (this);
}
_veld1.onblur = function () {
return handle_blur (this);
}
MaakKalender()
}
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
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.