Een placeholder effect met background-image
Ik heb een input field, en ik heb er voor de netheid als placeholder een afbeelding voor gebruikt. I.p.v. placeholder="search" bijv., heb ik het input element een background-image gegeven. Bij focus, verdwijnt de background-image uiteraard, maar als ik er iets in typ, en vervolgens de focus weghaal, komt de background-image weer terug.
In het kort, ik wil ervoor zorgen dat ik de background-image property simpelweg als een soort placeholder kan gebruiken.
Nu ben ik wel zover gekomen dat als ik iets typ, de background-image verdwijnt, maar als ik het input veldje weer leeg maak, komt het ook niet meer terug, als het veld leeg is moet de background-image property weer actief worden.
Hier mijn code:
HTML
Code (php)
1
<input id="universalSearch" class="universalSearch" type="text" name="universalSearch" onchange="hideIcon(this);" />
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input.universalSearch {
margin-left: 0;
padding: 8px;
padding-right: 25px;
width: 230px;
background: rgba(255, 255, 255, 0.4);
background-image: url(img/search_place_holder.png);
background-repeat: no-repeat;
border: 0;
border-radius: 3px;
font: 15px Arial;
color: #FFF;
transition: background 0.5s ease;
}
input.universalSearch:focus {
background: rgba(255, 255, 255, 1.0);
color: #222;
transition: background 0.5s ease;
}
margin-left: 0;
padding: 8px;
padding-right: 25px;
width: 230px;
background: rgba(255, 255, 255, 0.4);
background-image: url(img/search_place_holder.png);
background-repeat: no-repeat;
border: 0;
border-radius: 3px;
font: 15px Arial;
color: #FFF;
transition: background 0.5s ease;
}
input.universalSearch:focus {
background: rgba(255, 255, 255, 1.0);
color: #222;
transition: background 0.5s ease;
}
Javascript
Code (php)
1
2
3
4
2
3
4
function hideIcon(self)
{
self.style.backgroundImage = 'none';
}
{
self.style.backgroundImage = 'none';
}
Mvg,
Piet
Gewijzigd op 28/06/2013 17:44:49 door Piet Jansen
hieronder een voorbeeld.
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
<style>
input.placeholder:focus {
background-color:#FFF;
background-image:none;
}
input.placeholder {
background-color:#3C3;
background-image:url('inputback.png');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.placeholder').blur(function(e) {
if($(this).val() == '')
$(this).addClass('placeholder');
else
$(this).removeClass('placeholder');
});
});
</script>
</head>
<body>
<input class="placeholder" type="text" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
<style>
input.placeholder:focus {
background-color:#FFF;
background-image:none;
}
input.placeholder {
background-color:#3C3;
background-image:url('inputback.png');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.placeholder').blur(function(e) {
if($(this).val() == '')
$(this).addClass('placeholder');
else
$(this).removeClass('placeholder');
});
});
</script>
</head>
<body>
<input class="placeholder" type="text" />
</body>
</html>
Gewijzigd op 29/06/2013 11:04:08 door Frank Nietbelangrijk