Hoi
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
4.090 views
Oké, maar dan moeten we even precies zijn:
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?
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.
<!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>
online voorbeeld op jankoehoorn.nl
heej bedankt! Werkt perfect, maar dat wist je al ;)
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?
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?
Zo:
<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()
}
wacht ik heb t al gefixed :D
edit:
haha precies op t zelfde tijdstip reageren. Thanks iig voor je hulp!!
K heb m zo gemaakt:
<body onload="MaakKalender(),init()">
edit:
haha precies op t zelfde tijdstip reageren. Thanks iig voor je hulp!!
K heb m zo gemaakt:
<body onload="MaakKalender(),init()">
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.
ah okeej dan.. gaan we aan werken ;)
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');
?
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');
?
Nee, je moet per veld een regel code hebben.
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.
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.