输入框内容改变实时放大回显带数字金额逗号

来源:https://www.sucaihuo.com/js/2680.html 2017-08-09 22:49浏览(607) 收藏

一款输入框内容改变实时放大回显的特效,输入纯数字金额的时候,自动用逗号隔开显示,输入的非数字时自动放大回显,整体效果还是不错的哦,喜欢的童鞋请收下吧。
输入框内容改变实时放大回显带数字金额逗号
分类:文字特效 > 文字动画 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2