html:
<div style="position:relative;">
<input type="password" id="pass1" class="base-input" placeholder=" 请输入您新密码" />
</div>
css:
.phcolor{ color:#999;}
解决input[type=‘text‘]
1 supportPlaceholder=‘placeholder‘in document.createElement(‘input‘),
2 placeholder=function(input){
3 var text = input.attr(‘placeholder‘), defaultValue = input.defaultValue;
4 if(!defaultValue){
5 input.val(text).addClass("phcolor");
6 }
7 input.focus(function(){
8 if(input.val() == text){
9 $(this).val("");
10 }
11 })
12 input.blur(function(){
13 if(input.val() == ""){
14 $(this).val(text).addClass("phcolor");
15 }
16 })
17
18 //输入的字符不为灰色
19 input.keydown(function(){
20 $(this).removeClass("phcolor");
21 });
22 }
23
24 //当浏览器不支持placeholder属性时，调用placeholder函数
25 if(!supportPlaceholder){
26 $(‘input‘).each(function(){
27 text = $(this).attr("placeholder");
28 if($(this).attr("type") == "text"){
29 placeholder($(this));
30 }
31 })
32 }
解决input[type=‘password‘]
1 (function($){
2 var Placeholder,
3 inputHolder = ‘placeholder‘ in document.createElement(‘input‘),
4 Placeholder = {
5 ini:function () {
6 if (inputHolder) {
7 return false;
8 }
9 this.el = $(‘:password[placeholder]‘);
10 this.setHolders();
11 },
12 setHolders: function(obj){
13 var el = obj ? $(obj) : this.el;
14 if (el) {
15 var self = this;
16 el.each(function() {
17 var span = $(‘<label />‘);
18 span.text( $(this).attr(‘placeholder‘) );
19 span.css({
20 color: ‘#999‘,
21 fontSize: "15px",
22 fontFamily: $(this).css(‘fontFamily‘),
23 position: ‘absolute‘,
24 top: $(this).offset().top + $(this).css("marginTop"),
25 left: ( parseInt($(this).offset().left) + 30 + parseInt( $(this).css("marginLeft").replace(/px/g,"") ) ) + "px",
26 width: $(this).width(),
27 height: $(this).height(),
28 lineHeight: $(this).height() + ‘px‘,
29 textIndent: $(this).css(‘textIndent‘),
30 paddingLeft: $(this).css(‘borderLeftWidth‘),
31 paddingTop: $(this).css(‘borderTopWidth‘),
32 paddingRight: $(this).css(‘borderRightWidth‘),
33 paddingBottom: $(this).css(‘borderBottomWidth‘),
34 display: ‘inline‘,
35 overflow: ‘hidden‘
36 })
37 if (!$(this).attr(‘id‘)) {
38 $(this).attr(‘id‘, self.guid());
39 }
40 span.attr(‘for‘, $(this).attr(‘id‘));
41 $(this).after(span);
42 self.setListen(this, span);
43 })
44 }
45 },
46 setListen : function(el, holder) {
47 if (!inputHolder || !textareaHolder) {
48 el = $(el);
49 el.bind(‘keydown‘, function(e){
50 if (el.val() != ‘‘) {
51 holder.hide(0);
52 } else if ( /[a-zA-Z0-9`[email protected]#\$%\^&\*\(\)_+-=\[\]\{\};:‘"\|\\,.\/\?<>]/.test(String.fromCharCode(e.keyCode)) ) {
53 holder.hide(0);
54 } else {
55 holder.show(0);
56 }
57 });
58 el.bind(‘keyup‘, function(e){
59 if (el.val() != ‘‘) {
60 holder.hide(0);
61 } else {
62 holder.show(0);
63 }
64
65 });
66 el.on("focus",function(e){
67 if(el.val()==""){
68 holder.hide(0);
69 }
70 });
71 el.on("blur",function(e){
72 if(el.val()==""){
73 holder.show(0);
74 }
75 });
76 }
77 },
78 guid: function() {
79 return ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function(c) {
80 var r = Math.random()*16| 0,
81 v = c == ‘x‘ ? r : (r&0x3|0x8);
82 return v.toString(16);
83 }).toUpperCase();
84 }
85
86 }
87
88 $.fn.placeholder = function () {
89 if (inputHolder && textareaHolder) {
90 return this;
91 }
92 Placeholder.setListen(this);
93 return this;
94 }
95
96 $.placeholder = Placeholder;
97
98 })(jQuery)
时间： 2024-10-13 17:29:33