-
Notifications
You must be signed in to change notification settings - Fork 1
/
placeholder.js
73 lines (67 loc) · 2.49 KB
/
placeholder.js
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
* @authors SX
* @date 2014-08-11 09:27:48
* @explain 当浏览器不支持input标签的placeholder属性时的替代方案
*/
function initPlaceholder(){}
var placeholder = new initPlaceholder();
(function($){
initPlaceholder.prototype.init = function(){
// 判断当前浏览器是否支持input标签的placeholder属性
if(hasPlaceholder()){return false;}
// 取得页面中所有带有placeholder属性的input、textarea标签
var inputLabel = $("input[placeholder], textarea[placeholder]");
inputLabel.each(function(){
var that = $(this),
placeholderVal = that.attr("placeholder"),
isPassword = that.attr("type")==="password" ? true : false;
// 如果输入框本身有value值了,就不增加placeholder效果了
if(that.val().length<=0){
// 将placeholder属性的值写到输入框的value中
if(isPassword){
var placeholderId = that.attr("data-placeholderId");
if(!placeholderId || placeholderId===""){return false;}
// 如果输入框类型为密码,那么新建一个div作为显示placeholderVal的容器
$("body").prepend("<div id=\"passwordPlaceholder\" data-placeholderId=\""+placeholderId+"\" style=\"position:absolute; z-index:9999; display:none;\">"+placeholderVal+"</div>");
$("div#passwordPlaceholder").css({"top":that.offset().top+"px", "left":that.offset().left+"px", "width":that.width()+"px", "height":that.height()+"px", "line-height":that.height()+"px", "padding-left":"5px"});
$("div#passwordPlaceholder").show();
}else{
that.val(placeholderVal);
}
}
// ---------输入框事件绑定---------
that.focus(function(){
var inputVal = $(this).val()._trimAll();
if(isPassword){
var placeholderId = $(this).attr("data-placeholderId");
$("div[data-placeholderId='"+placeholderId+"']").hide();
}else{
if(inputVal === placeholderVal){
$(this).val("");
}
}
});
that.blur(function(){
var inputVal = $(this).val()._trimAll();
if(isPassword){
if(isNull(inputVal)){
var placeholderId = $(this).attr("data-placeholderId");
$("div[data-placeholderId='"+placeholderId+"']").show();
}
}else{
if(isNull(inputVal)){
$(this).val(placeholderVal);
}
}
});
$("div#passwordPlaceholder").click(function(){
var placeholderId = $(this).attr("data-placeholderId");
$("input[data-placeholderId='"+placeholderId+"']").focus();
$(this).hide();
});
});
}
$(function(){
placeholder.init();
})
})(jQuery)