defval.js
4.23 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/**
* 输入框提示层
*
*/
define( 'defval', function( require, exports ) {
var defval = function( target, options ) {
this.target = target;
this.opt = {
fontColor: '#999'
};
$.extend( this.opt, options );
this.init();
};
defval.prototype = {
init: function() {
// 清空源input 的value，同时保存提示文字
if( $( this.target ).val() != '' ){
return;
}
var id = 's-defval-'+ ( new Date() ).getTime() * Math.floor( Math.random() * 9999 ),
t = $( this.target ), v = $( this.target ).attr( 'defval' ),
// 如果input 添加 float ， 则添加position 则会出现位置上的bug
fixed_pos = t.css( 'float' ) != 'none' ? '' : 'position:relative';
t.attr( 'defval', v ).val( '' );
// 创建一个外层容器, 解决在其他元素append 或者高度变化的时候，造成的 提示层依旧在原位置问题
// fixed_pos 锁定位置, 避免该输入框前后dom 发生变化时候 造成的提示层位置不变
t.wrap( '<span class="s-defval_wrap" style="'+ fixed_pos +'"></span>' );
// 创建每个input 的提示层
t.after( '<div id="'+ id +'" class="s-defval" style="position:absolute;">'+ v +'</div>' );
this.target._dv = document.getElementById( id );
this.set();
this.bind();
},
// 设置提示层的位置大小
set: function() {
var type_arr = { 'margin': [], 'padding': [] }, num_arr = {}, pos_arr = [ 'top', 'right', 'bottom', 'left' ],
t = $( this.target ), tp = t.parents( '.s-defval_wrap' )
dv = $( this.target._dv ),
// border 造成的div 位置偏移
// left border + right border
// 如果 border: none 则直接 = 2
b_lr_rela = this.getNum( $( this.target ).css( 'borderLeftWidth' ), $( this.target ).css( 'borderRightWidth' ) ) * 0.5 + 2,
b_tb_rela = this.getNum( $( this.target ).css( 'borderTopWidth' ), $( this.target ).css( 'borderBottomWidth' ) ) * 0.5 + 2,
line_hei = ( t.outerHeight() - b_tb_rela - 2 );
if( t.is( 'textarea' ) ) {
line_hei = '22';
}
if( isNaN( b_lr_rela ) ) { b_lr_rela = 2; }
if( isNaN( b_tb_rela ) ) { b_tb_rela = 2; }
// margin & padding
for( var key in type_arr ) {
$.each( pos_arr, function( i, item ) {
var _att = key + '-' + item;
type_arr[ key ].push( t.css( _att ) );
});
num_arr[ key ] = {};
num_arr[ key ].tb = this.getNum( type_arr[ key ][ 0 ], type_arr[ key ][ 2 ] );
num_arr[ key ].lr = this.getNum( type_arr[ key ][ 1 ], type_arr[ key ][ 3 ] );
type_arr[ key ] = $.isArray( type_arr[ key ] ) ? type_arr[ key ].join( ' ' ) : null;
}
dv.css({
'left' : ( t.position().left + b_lr_rela ) + 'px',
'top' : ( t.position().top + b_tb_rela ) + 'px',
'width' : ( t.outerWidth() - num_arr[ 'padding' ].lr - b_lr_rela ) + 'px',
'height' : ( t.outerHeight() - num_arr[ 'padding' ].tb - b_tb_rela ) + 'px',
'line-height' : ( line_hei - num_arr[ 'padding' ].tb ) + 'px',
'padding' : type_arr[ 'padding' ],
'margin' : type_arr[ 'margin' ],
'color' : this.opt.fontColor,
'overflow' : 'hidden',
'text-overflow' : 'ellipsis',
'white-space' : 'nowrap',
'background' : 'none',
'cursor' : 'text'
});
this.target._dv._t = t;
},
// 获取两个css 字符串之和
getNum: function( num1, num2 ) {
var v = parseInt( num1.replace( 'px', '' ) ) + parseInt( num2.replace( 'px', '' ) )
return isNaN( v ) ? 0 : v;
},
bind: function() {
// 提示层点击变淡同时获得焦点
$( this.target._dv ).click(function() {
$( this ).fadeTo( 60, 0.4 );
$( this._t ).focus();
});
$( this.target )
.css( 'outline', 'none' )
.blur(function() {
var v = $.trim( $( this ).val() );
if( !v.length && v != $( this._dv ).text() ) {
$( this._dv ).show().fadeTo( 60, 1 );
}
})
.keyup(function() {
var v = $.trim( $( this ).val() );
if( v.length > 0 ) {
$( this._dv ).hide();
}
})
// 获得焦点只减淡
.focus(function() {
var v = $.trim( $( this ).val() );
if( !v.length && v != $( this._dv ).text() ) {
$( this._dv ).fadeTo( 60, 0.4 );
}
});
}
};
return defval;
});