Заполнители ввода текста и поддержка кросс-браузера
Поэтому я знаю, что атрибут placeholder HTML5 не поддерживается в IE до IE10, но мне действительно нужна функциональность.
Я думал, что могу сделать следующее, но, похоже, он не работает (похоже, что .focus и .blur не .blur...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
function isPlaceholderSupported() {
var input = document.createElement('input');
return ('placeholder' in input);
}
var placeholderSupport = isPlaceholderSupported();
if (placeholderSupport == false) {
$('#store_name').val('Store Name');
}
$('#store_name').focus(function() {
if (placeholderSupport == false) {
if ($(this).val() == 'Store Name') {
$(this).val('');
}
}
});
$('#store_name').blur(function() {
if (placeholderSupport == false) {
if ($(this).val() == '') {
$(this).val('Store Name');
}
}
});
});
</script>
<input type="text" name="store_name" id="store_name" placeholder="Store Name" />
Я не вижу недостатка в логике здесь, но это просто не работает. В инструментах Chrome dev не сообщается об ошибках, и я еще не пробовал его в IE9.
Любая помощь будет оценена!
Проверьте jQuery ниже только для IE
$(function() {
var textBox = $('input[type="text"]');
textBox.each(function() {
var self = $(this);
self.val(self.attr('placeholder'));
});
});
$(document).on('focus', textBox, function() {
var self = $(this);
if(self.val() == self.attr('placeholder')) {
self.val('');
}
});
$(document).on('blur', textBox, function() {
var self = $(this);
if(self.val() == '') {
self.val(self.attr('placeholder'));
}
});
<input id="email" type="text"/>
/*placeholder*/
function initPlaceHolder(input, defaultValue) {
input.onfocus = function() {
if (input.value == defaultValue){
input.value = "";
input.style.color = '#444444';
}
};
function remove() {
if (input.value == "") {
input.value = defaultValue;
input.style.color = '#c9c9c9';
}
}
input.onblur = remove;
remove();
}
window.onload = function(){
initPlaceHolder(document.getElementById("email"), "Enter your Email");
};
Вы можете использовать этот метод для заполнителей, поддерживающих IE9+
$('[placeholder]').focus(function () {
var input = $(this);
if(input.attr('data-password') == 'password') {
input.attr('type','password');
input.attr('data-password','text');
}
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
if(input.attr('type') == 'password') {
input.attr('type','text');
input.attr('data-password','password');
}
}
}).blur(function () {
var input = $(this);
if(input.attr('data-password') == 'password') {
input.attr('type','password');
input.attr('data-password','text');
}
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
if(input.attr('type') == 'password') {
input.attr('type','text');
input.attr('data-password','password');
}
}
}).keyup(function () {
var input = $(this);
if(input.attr('data-password') == 'password') {
input.attr('type','password');
input.attr('data-password','text');
}
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
if(input.attr('type') == 'password') {
input.attr('type','text');
input.attr('data-password','password');
}
}
}).blur();
/* <![CDATA[ */
$(function() {
var input = document.createElement("input");
if(('placeholder' in input)==false) {
$('[placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
})
});
}
});
/* ]]> */
Попробуй это..
Почему бы не использовать существующий плагин, например http://archive.plugins.jquery.com/project/jq-watermark?
/*For placeholder*/
function ClearPlaceHolder(input) {
if (input.value == input.defaultValue){
input.value = "";
document.getElementById(input.id).style.color = '#444444';
}
}
function SetPlaceHolder (input) {
if (input.value == "") {
input.value = input.defaultValue;
document.getElementById(input.id).style.color = '#c9c9c9';
}
}