HTML代码:
1
2
3
4
|
< div class = "item-textarea" >
< textarea ></ textarea >
< span >还可以输入< i >500</ i >个文字</ span >
</ div >
|
CSS代码:
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
|
.item-textarea{
position : relative ;
}
.item-textarea textarea{
width : 100% ;
height : 100px ;
padding : 10px ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
border-radius: 5px ;
background : #fff ;
-webkit-box-shadow: inset 0 1px 2px rgba( 0 , 0 , 0 ,. 3 );
-moz-box-shadow: inset 0 1px 2px rgba( 0 , 0 , 0 ,. 3 );
box-shadow: inset 0 1px 2px rgba( 0 , 0 , 0 ,. 3 );
border : 1px solid #ddd ;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size : 0.14 rem;
}
.item-textarea span{
display : block ;
position : absolute ;
right : 6px ;
bottom : 7px ;
color : #9a9a9a ;
font-size : 0.12 rem;
}
.item-textarea span i{
color : #55acef ;
}
|
简单看下当前的页面效果:

为了方便,首先引入jQuery文件,这里用到一个匿名的自调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
|
( function ( ){
var textArea = $( 'textarea' );
var numItem = $( 'i' );
var max = numItem.text();
var curLength = textArea.val().length;
textArea.attr( 'maxlength' ,max);
numItem.text(max - curLength);
textArea.on( 'input propertychange' , function () {
numItem.text(max - $( this ).val().length);
});
})()
|
本文转自 frwupeng517 51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1867095