某输入框限定最多输入15(或其他数字)个字符并实时计算用户输入的字符数,显示出可输入字符数。右下角数字表示允许长度,数字可到负,到负标红。效果如下图:
html代码如下:
<div class="user-info-detail">
<p>
<span class="item-name"><i class="iconfont icon-dian"></i>用户昵称</span>
<input class="user-name" type="text" placeholder="支持中英文、数字、符号"/>
<span class="num"></span>
</p>
</div>
js代码如下:
showCharNum();
function showCharNum(){
$('.user-info-detail input[type=text]').on('keyup change',function(){
var num = $(this).val().length;
$(this).next().removeClass('tip');
if(num>15){
$(this).next().addClass('tip');
}
$(this).next().html(15-num);
}).trigger("keyup");
}
scss代码如下:
.user-info-detail{
margin: 0 30px;
p{
position: relative;
height: 40px;
line-height: 40px;
margin-bottom: 18px;
font-size: 14px;
.item-name{
display: inline-block;
width: 72px;
margin-right: 18px;
color: #999;
text-align: right;
.icon-dian{
margin-right: 2px;
color: #f63e53;
font-size: 14px;
}
}
.num{
position: absolute;
right: 10px;
top: 0;
font-size: 12px;
color: #999;
&.tip{
color: #f63e53;
}
}
input[type="text"]{
width: 805px;
height: 40px;
padding-left: 10px;
padding-right: 40px;
box-sizing: border-box;
color: #333;
background: #f5f5f5;
border: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
版权声明:本文为博主原创文章,未经博主允许不得转载。https://blog.csdn.net/qq_36584352/article/details/80181044