placeholder voor zoekopdracht veld in ie
Code (php)
1
2
3
4
2
3
4
<?php
<input type="text" name="zoekfunctie" size="25" value="" placeholder="Zoek Bedrijf"/>
<input type="text" name="zoekfunctie1" size="25" value="" placeholder="Zoek op regio"/>
?>
<input type="text" name="zoekfunctie" size="25" value="" placeholder="Zoek Bedrijf"/>
<input type="text" name="zoekfunctie1" size="25" value="" placeholder="Zoek op regio"/>
?>
</code>
Toevoeging op 28/11/2012 14:59:53:
<code>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
<style>
.hasPlaceholder {
color: #777;
}
</code>
Misschien de volgorde van je elementen of zo (geen document.ready ...).
Probeer eens exact dit uit: (klein beetje aangepast)
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
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
<input type="text" name="zoekfunctie" size="25" value="" placeholder="Zoek Bedrijf"/>
<input type="text" name="zoekfunctie1" size="25" value="" placeholder="Zoek op regio"/>
<input type="submit" value="GO">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(document).ready(function($) {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
// This adds placeholder support to browsers that wouldn't otherwise support it.
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasplaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasplaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasplaceholder').val('');
});
}
});
</script>
<style>
.hasplaceholder {
color: #777;
}
</style>
<input type="text" name="zoekfunctie1" size="25" value="" placeholder="Zoek op regio"/>
<input type="submit" value="GO">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(document).ready(function($) {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
// This adds placeholder support to browsers that wouldn't otherwise support it.
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasplaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasplaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasplaceholder').val('');
});
}
});
</script>
<style>
.hasplaceholder {
color: #777;
}
</style>
Merk trouwens op dat ik de jQuery versie verhoogd heb.
Gewijzigd op 28/11/2012 16:19:39 door Kris Peeters
Je kan het placeholder effect krijgen door een value toe te voegen en die te verwijderen bij het onfocus event. Met de check erbij of een browser placeholder ondersteund wordt het dan zoiets:
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
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
(function (polyfill) {
// create a fixture element
var input = document.createElement('input');
input.type = 'text';
if (!input.hasOwnProperty('placeholder')) {
// browser doesn't support the placeholder attr
polyfill();
}
})(function () {
var inputs = document.getElementsByTagName('input');
var addPlaceholder = function (e) {
if (e.nodeName) {
self = e;
} else {
self = this;
}
self.value = self.getAttribute('placeholder');
self.style.color = '#aaa';
};
var removePlaceholder = function (e) {
this.value = '';
this.style.color = '#000';
};
[].forEach.call(inputs, function(input) {
if (null !== input.getAttribute('placeholder')) {
// input has placeholder attribute
addPlaceholder(input);
input.onfocus = removePlaceholder;
input.onblur = addPlaceholder;
}
});
});
// create a fixture element
var input = document.createElement('input');
input.type = 'text';
if (!input.hasOwnProperty('placeholder')) {
// browser doesn't support the placeholder attr
polyfill();
}
})(function () {
var inputs = document.getElementsByTagName('input');
var addPlaceholder = function (e) {
if (e.nodeName) {
self = e;
} else {
self = this;
}
self.value = self.getAttribute('placeholder');
self.style.color = '#aaa';
};
var removePlaceholder = function (e) {
this.value = '';
this.style.color = '#000';
};
[].forEach.call(inputs, function(input) {
if (null !== input.getAttribute('placeholder')) {
// input has placeholder attribute
addPlaceholder(input);
input.onfocus = removePlaceholder;
input.onblur = addPlaceholder;
}
});
});
Toevoeging op 28/11/2012 18:01:28:
Het placeholder attribuut is een nieuw attribuut in HTML5, wat nog niet alle browsers ondersteunen (meer informatie: http://www.wufoo.com/html5/attributes/01-placeholder.html )
Je kan het placeholder effect krijgen door een value toe te voegen en die te verwijderen bij het onfocus event. Met de check erbij of een browser placeholder ondersteund wordt het dan zoiets:
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
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
(function (polyfill) {
// create a fixture element
var input = document.createElement('input');
input.type = 'text';
if (!input.hasOwnProperty('placeholder')) {
// browser doesn't support the placeholder attr
polyfill();
}
})(function () {
var inputs = document.getElementsByTagName('input');
var addPlaceholder = function (e) {
if (e.nodeName) {
self = e;
} else {
self = this;
}
self.value = self.getAttribute('placeholder');
self.style.color = '#aaa';
};
var removePlaceholder = function (e) {
this.value = '';
this.style.color = '#000';
};
[].forEach.call(inputs, function(input) {
if (null !== input.getAttribute('placeholder')) {
// input has placeholder attribute
addPlaceholder(input);
input.onfocus = removePlaceholder;
input.onblur = addPlaceholder;
}
});
});
// create a fixture element
var input = document.createElement('input');
input.type = 'text';
if (!input.hasOwnProperty('placeholder')) {
// browser doesn't support the placeholder attr
polyfill();
}
})(function () {
var inputs = document.getElementsByTagName('input');
var addPlaceholder = function (e) {
if (e.nodeName) {
self = e;
} else {
self = this;
}
self.value = self.getAttribute('placeholder');
self.style.color = '#aaa';
};
var removePlaceholder = function (e) {
this.value = '';
this.style.color = '#000';
};
[].forEach.call(inputs, function(input) {
if (null !== input.getAttribute('placeholder')) {
// input has placeholder attribute
addPlaceholder(input);
input.onfocus = removePlaceholder;
input.onblur = addPlaceholder;
}
});
});