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);
我这里只是简单的用全局样式这样写了,如果你不想所有的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);
相关文章推荐
- uva10562——看图写树(树的先序遍历!)
- LVM 管理减少swap分区空间增加到根分区
- 画图类
- GRE写作必备句型
- makefile -include
- Algorithms—19.Remove Nth Node From End of List
- SAPUI5-Routing
- javascript比较两个日期相差天数的方法
- CSS3
- Online Judge System For SzNOI 题库 语法百题 C++ d013
- log4j生成有日期的日志文件名
- Tomcat各种配置
- ubuntu 12.04下编译安装nginx-1.9.3
- POJ1664放苹果
- atexit()
- list comprehension & generator expression
- php使用pear mail发送邮件
- 2015年上半年最受欢迎的应用和游戏
- mac 安装client.key.cer、client.key.p12提示不能修改“System Roots”钥匙串
- Android基础_活动_启动模式