一款输入框内容改变实时放大回显的特效,输入纯数字金额的时候,自动用逗号隔开显示,输入的非数字时自动放大回显,整体效果还是不错的哦,喜欢的童鞋请收下吧。
页面的head部分,需引入jQuery库和设置好页面元素的样式,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
body{
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.fill_ipt{
position: relative;
margin: 200px 0 0 200px;
}
.showbig{
display: block;
width: 400px;
height: 40px;
border: 1px solid #03A9F4;
border-radius: 3px;
font-size: 15px;
}
input{
display: block;
width: 100%;
height: 100%;
outline: none;
border: none;
text-indent: 20px;
}
.bigtx{
height: 30px;
min-width:10px;
line-height: 30px;
padding: 0px 8px;
border: 1px solid #C9CFDA;
background: #f5f7fc;
box-shadow: 0 0 10px rgba(120,144,156,0.2);
position: absolute;
left: 0;
top: -0px;
font-size: 24px;
color: #1c2b36;
line-height: normal;
/*display: none;*/
opacity: 0;
transition: all 0.2s;
}
.bigtx span{
font-size: 24px;
color: #1c2b36;
}
</style>
页面的body部分,一个div容器里放入一个input输入框即可,代码如下:
<div class="fill_ipt">
<input type="text" class="showbig" name="" id="" value="" placeholder="请输入内容" />
</div>
页面的底部,需要遍历回显的内容和响应其他事件,代码如下:
<script type="text/javascript">
//金额输入放大显示
$(".showbig").focus(function(){
var _fill_ipt = $(this).parent(".fill_ipt");
if (_fill_ipt.find('.bigtx').size() === 0) {
var tar = "<div class='bigtx'><span></span><i></i></div>";
_fill_ipt.append(tar)
}
}).bind('input propertychange', function(){
//console.log(1)
var tx =$(this).val();
var _format_value = tx;
if (_format_value !== '' && !isNaN(_format_value)) {
var _value_array = _format_value.split('.');
var _int = _value_array[0];
var _decimal = '';
if (_value_array.length > 1) {
_decimal = _value_array[1];
}
var _int_str = '';
var _count = 0;
for (var i = _int.length - 1; i >= 0; i--) {
_count++;
_int_str = _int.charAt(i) + _int_str;
if (!(_count % 3) && i !== 0) {
_int_str = ',' + _int_str;
}
}
_format_value = _int_str;
if (_decimal !== '') {
_format_value += '.' + _decimal;
}
}
$(this).siblings(".bigtx").css({
"top":"-37px",
"opacity":"1"
});
$(this).siblings(".bigtx").find("span").html(_format_value);
if(_format_value ===""){
$(this).siblings(".bigtx").css({
"top":"0",
"opacity":"0"
})
}
}).blur(function(){
$(this).siblings(".bigtx").css({
"top":"0",
"opacity":"0"
});
var _fill_ipt = $(this).parent(".fill_ipt");
if (_fill_ipt.find('.bigtx').size() > 0) {
setTimeout(function () {
_fill_ipt.find('.bigtx').remove();
}, 200);
}
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791