Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

voorgeplaatste letters in tekstveld (Opgelost)

Gust - 22/11/2012 19:34 (laatste wijziging 22/11/2012 19:36)
MySQL interesse		Als je naar deze site gaat, dan zie je bovenaan een aantal tekstvelden: - met voorgeplaatste tekst - wazig - wordt nog waziger als je één keer in het veld klikt - gaat helemaal weg als je begint te tijpen. dit is net wat ik zoek. Maar ik kan de css of het javascript erachter maar niet vinden. Is er iemand die weet waar je dit kunt vinden?

6 antwoorden

Gesponsorde links

marten - 22/11/2012 19:40
Beheerder		Zoals dit bijvoorbeeld? http://www.dail...trick.aspx

julianb - 22/11/2012 20:12
Lid		http://codepen.io/tyrus/pen/eLlgs of misschien dit

Gust - 22/11/2012 21:11
MySQL interesse		Het is eerder een mengeling van de twee. @Marten, dat sluit niet helemaal aan bij hetgeen ik zoek.

vinTage - 22/11/2012 23:08 (laatste wijziging 23/11/2012 08:41)

Nieuw lid

Basicly...positioneer de label text onder de (transparante)input, en dmv een verandering (keyup/keydown/whatever, fade je het label weg.
Een vb met jQuery

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.wowCoolEffectHolder{
  position:relative;
  display:block;
  height:40px
}
.wowCoolEffectHolder label{
  position:absolute;
}
.wowCoolEffectHolder input{
  position:absolute;
  background:transparent
}
</style>
</head>
<body>

<span class="wowCoolEffectHolder">
    <label for="naam" >Naam:</label><input id="naam" type="text">
</span>

<span class="wowCoolEffectHolder">
    <label for="email" >Email:</label><input id="email" type="text">
</span>

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.wowCoolEffectHolder input').keydown( function(e){
  $("label[for='"+$(this).attr('id')+"']").fadeOut('slow')
})
</script>
</body>
</html>

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.wowCoolEffectHolder{
  position:relative;
  display:block;
  height:40px
}
.wowCoolEffectHolder label{
  position:absolute;
}
.wowCoolEffectHolder input{
  position:absolute;
  background:transparent
}
</style>
</head>
<body>
 
<span class="wowCoolEffectHolder">
    <label for="naam" >Naam:</label><input id="naam" type="text">
</span>
 
<span class="wowCoolEffectHolder">
    <label for="email" >Email:</label><input id="email" type="text">
</span>
 
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.wowCoolEffectHolder input').keydown( function(e){
  $("label[for='"+$(this).attr('id')+"']").fadeOut('slow')
})
</script>
</body>
</html>

edit
In bovenstaande voorbeeldje ga ik er blind vanuit dat iedereen javascript enabled heeft, maar mocht dat niet zo zijn, dan blijft de labeltekst keihard in beeld staan van de textinput.
Dit is op te lossen door bijvoorbeeld de positioning ook met js aan te geven.

edit2 Zo iets dus:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.wowCoolEffectHolder{
  position:relative;
  display:block;
  height:40px
}
.wowCoolEffectHolder label{
}
.wowCoolEffectHolder input{
  background:transparent
}
</style>
</head>
<body>

<span class="wowCoolEffectHolder">
    <label for="naam" >Naam:</label><input id="naam" type="text">
</span>

<span class="wowCoolEffectHolder">
    <label for="email" >Email:</label><input id="email" type="text">
</span>

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $('.wowCoolEffectHolder label, .wowCoolEffectHolder input').css("position", "absolute")
})	

$('.wowCoolEffectHolder input').keydown( function(e){
  $("label[for='"+$(this).attr('id')+"']").fadeOut('slow')
})
</script>
</body>
</html>

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
.wowCoolEffectHolder{
  position:relative;
  display:block;
  height:40px
}
.wowCoolEffectHolder label{
}
.wowCoolEffectHolder input{
  background:transparent
}
</style>
</head>
<body>
 
<span class="wowCoolEffectHolder">
    <label for="naam" >Naam:</label><input id="naam" type="text">
</span>
 
<span class="wowCoolEffectHolder">
    <label for="email" >Email:</label><input id="email" type="text">
</span>
 
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $('.wowCoolEffectHolder label, .wowCoolEffectHolder input').css("position", "absolute")
})	
 
$('.wowCoolEffectHolder input').keydown( function(e){
  $("label[for='"+$(this).attr('id')+"']").fadeOut('slow')
})
</script>
</body>
</html>

XenoX - 23/11/2012 13:43
PHP expert		http://dev.w3.o...-attribute Met als polyfill: https://github....laceholder Voor het 'wazig' kan je met CSS de standaard style input stylen. En bij het klikken in de input style je met de :focus pseudo selector. Volledig HTML5/CSS (met placeholder polyfill voor oudere browsers)

Gust - 24/11/2012 17:28
MySQL interesse		Dat is het. Bedankt!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten