Заполнители ввода текста и поддержка кросс-браузера

56
2

Поэтому я знаю, что атрибут 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.

Любая помощь будет оценена!

спросил(а) 2012-11-16T15:38:00+04:00 7 лет, 10 месяцев назад
1
Решение
-4

Проверьте 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'));
}
});

ответил(а) 2012-11-16T15:48:00+04:00 7 лет, 10 месяцев назад
58

<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");
};

ответил(а) 2012-11-25T19:50:00+04:00 7 лет, 10 месяцев назад
41

Вы можете использовать этот метод для заполнителей, поддерживающих 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();

ответил(а) 2013-12-10T13:30:00+04:00 6 лет, 9 месяцев назад
41

/* <![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('');
})
});
}
});
/* ]]> */

Попробуй это..

ответил(а) 2013-05-04T18:10:00+04:00 7 лет, 4 месяца назад
41

Почему бы не использовать существующий плагин, например http://archive.plugins.jquery.com/project/jq-watermark?

ответил(а) 2012-11-24T16:52:00+04:00 7 лет, 10 месяцев назад
41

/*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';
}
}

ответил(а) 2012-11-24T16:37:00+04:00 7 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема