jquery/js input 输入金额或者文字放大显示

最新推荐文章于 2023-04-11 08:43:07 发布
最新推荐文章于 2023-04-11 08:43:07 发布
阅读量460 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangtongpeng/article/details/103037040
版权

<script src="js/jquery.min.js"></script>

<style type="text/css">
.fill_ipt{
    position: relative;
    margin: 200px 0 0 500px;
}
.showbig{
    display: block;
    width: 400px;
    height: 40px;
    border: 1px solid #404040;
}
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>
</head>
<body>

<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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过js控制input文本框输入文本类型
梦醒已隔万重秋的博客
09-12 4881
今天碰到一个小问题，要求限制文本框输入类型，特地分享给大家，文本框类型限制主要靠正则表达式。下面是我查找总结整理的例子。具体输入要求可以自己查一下正则表达式。 这里用到一个JavaScript 的String 对象replace方法。 js验证输入框内容 只能输入0和1 只能输入英文 只能输入英文，无法粘贴，右键不会弹出粘贴菜单 只能输入数字：<br />只能输入数字
jQuery输入数字放大镜效果代码.zip
07-11
代码简介：jQuery输入数字放大镜效果代码是一款在文本框input输入数字放大镜效果代码。
js 输入框 输入金额 位数限制
03-22
js 输入框 输入金额 位数限制
JS实现表单输入放大效果
weixin_50854336的博客
07-24 301
JS实现表单输入放大效果
js实现文本框中内容的放大显示
navy专栏
10-06 1837
文本框放大 function $(id){ return document.getElementById(id); } function showBigInfo(obj){ var bigObj; if(!$("bigInfo")){ bigObj=document.createElement("span"); bigObj.se
js如何实现一个文本框只能输入数字 且是100的倍数
qq_43159630的博客
03-26 1491
var a = 123,b = 200; /\d/.test(a) && a % 100 == 0;//false /\d/.test(b) && b % 100 == 0;//true 转载
jquery仿支付宝input文本输入框放大组件.zip
07-04
jquery仿支付宝input文本输入框放大组件适用于文本输入的网页。
jquery-rsSliderLens:UI滑块控件，可放大当前值
05-24
jquery-rsSliderLens 呈现功能强大的输入范围控件。 除了细微的差别外，所有浏览器都以几乎相同的方式呈现<input type="range" /> ： 使用此插件，默认情况下，相同的标记呈现为： 或您想像力带给您的几乎任何...
input改变vlue内容实时放大回显
06-01
一般为输入金额时使用，带三位数逗号分隔功能，简洁易用
JS 仿支付宝input文本输入框放大组件
09-13
JS 仿支付宝input文本输入框放大组件,基于Jquery动态显示
正则表达式解决input框固定输入值得格式(金额,特殊字符)
01-18
在写输入用到input的时候，经常出现以下几种情况： 只能输入某。栗子：只能输入数字，只能输入字母（大写，小写）只能输入某固定格式。栗子：只能输入金额，只能输入小数且最多保留2位不能输入某。栗子：不能输入特殊字符，如“@#￥%&*”等 这种情况下，就需要直接在input上进行限制，在前端的应用中主要是用正则表达式来解决这些问题的 第一种情况：只能输入某 <template> <div id=app> {{value}} <el-input v-model=value clearable size=small class=row-value @inp
jquery控制input只能输入金额
酸柠檬的博客
05-03 3077
例子表单：[html] view plain copy&lt;input type="text" name="input1" id="input1" value=""  /&gt;  &lt;input type="text" name="input2" id="input2" value=""  /&gt;  &am
js根据数值范围计算字体大小
山有木兮木有枝 心悦君兮君不知
09-09 425
calcSize(maxNums,item) { // [20,12] //console.log('计算大小',maxNums,item.nums,(item.nums/maxNums).toFixed(2)) //console.log('大小',(item.nums/maxNums).toFixed(2)*8+12+'px') return (item.nums/maxNums).toFixed(2)*8+12+'px' } item.nums是每项值 ...
js浮点数计算精度问题
qq_36238651的博客
10-28 231
js语言在进行数字计算时会发生计算精度失真的情况，因为javascript使用了IEEE-745浮点数表示法，在运算是会将浮点数转换为二进制数字计算，例如： 0.1 -> 0.0001100110011001...(无限) 0.2 -> 0.0011001100110011...(无限) 因此会出现如下可能情况： console.log(0.1+0.2)//输出：0.300000...
js input 金额纠正
zq_3538的博客
03-20 374
onKeyUp="amount(this)" onBlur="overFormat(this)" function amount(th) { var regStrs = [ [ '^0(\\d+)$', '$1' ], //禁止录入整数部分两位以上，但首位为0 [ '[^\\d\\.]+$', '' ], //禁止录入任何非数字和点 [ '\\.(\...
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)
热门推荐
XLL20001022的博客
06-20 1万+
第一： 限制只能是整数 <input type = "text" name= "number" id = 'number' οnkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二： 限制是两位的小数 <input type = "text" name= "price" id = 'price' οnkeyup= "if( ! /^d*(?:.d{0,2})?
js input 过滤成带小数的数字/金额
relnardo的博客
04-11 197
【代码】js input 过滤成带小数的数字/金额。
Jquery 输入金额格式限制 插件
我生活的点滴
02-18 7090
<br />(function($) {<br />    $.fn.extend({<br />        money_mode: function(options) {<br />            var defaults = {<br />                decimal_length: 2,//小数点位数<br />                format: "#,###.00",//格式化类型<br />                locale: "us"<br /
jquery限制input只能输入数字
最新发布
07-09
你可以使用jQuery来限制一个input元素只能输入数字。你可以通过以下代码实现： ```javascript $(document).ready(function(){ // 监听input元素的输入事件 $("input").on("input", function(){ // 获取输入的值 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值