您的位置:首页 > 其它

placeholder的ie兼容性问题

2015-07-23 16:52 351 查看
在html中引用下面的js文件,且在样式文件中这样写:input,textarea{color:#999;} input:focus,textarea:focus{color:#333;}

我这里只是简单的用全局样式这样写了,如果你不想所有的input框都有提示,可以给需要的input特定的类,比如:.txt{color:#999;} .txt:focus{color:#333;}

(function($) {

/**
* Spoofs placeholders in browsers that don't support them (eg Firefox 3)
*
* Copyright 2011 Dan Bentley
* Licensed under the Apache License 2.0
*
* Author: Dan Bentley [github.com/danbentley]
*/

// Return if native support is available.
if ("placeholder" in document.createElement("input")) return;

$(document).ready(function(){
$(':input[placeholder]').not(':password').each(function() {
setupPlaceholder($(this));
});

$(':password[placeholder]').each(function() {
setupPasswords($(this));
});

$('form').submit(function(e) {
clearPlaceholdersBeforeSubmit($(this));
});
});

function setupPlaceholder(input) {

var placeholderText = input.attr('placeholder');

setPlaceholderOrFlagChanged(input, placeholderText);
input.focus(function(e) {
if (input.data('changed') === true) return;
if (input.val() === placeholderText) input.val('');
}).blur(function(e) {
if (input.val() === '') input.val(placeholderText);

}).change(function(e) {
input.data('changed', input.val() !== '');
});
}

function setPlaceholderOrFlagChanged(input, text) {
(input.val() === '') ? input.val(text) : input.data('changed', true);
}

function setupPasswords(input) {
var passwordPlaceholder = createPasswordPlaceholder(input);
input.after(passwordPlaceholder);

(input.val() === '') ? input.hide() : passwordPlaceholder.hide();

$(input).blur(function(e) {
if (input.val() !== '') return;
input.hide();
passwordPlaceholder.show();
});

$(passwordPlaceholder).focus(function(e) {
input.show().focus();
passwordPlaceholder.hide();
});
}

function createPasswordPlaceholder(input) {
return $('<input>').attr({
placeholder: input.attr('placeholder'),
value: input.attr('placeholder'),
id: input.attr('id'),
readonly: true
}).addClass(input.attr('class'));
}

function clearPlaceholdersBeforeSubmit(form) {
form.find(':input[placeholder]').each(function() {
if ($(this).data('changed') === true) return;
if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
});
}
})(jQuery);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: