input框在输入后将输入值格式化为数字

<input type="text" name="money"  required style="width: 15%" value="0" onblur="onlyNum(this)"  />
<script>
	function onlyNum(that){
        var vv = Math.round(that.value.replace(/[^\d.]/g,"") * 100) /100;
        vv += "";
        if(vv.indexOf(".")>-1){
            that.value = vv;
        }else{
            that.value = vv+".00";
        }
    }
</script>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解了你的问题。以下是我的回答: 首先,我们需要在输入框中添加一个 onChange 事件监听器,来监听用户的输入。在 onChange 事件处理函数中,我们可以对用户输入的内容进行处理,以达到格式化电话号码的目的。 下面是一个示例代码: ```typescript import React, { useState } from 'react'; const PhoneInput = () => { const [phone, setPhone] = useState(''); const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const input = event.target.value.replace(/\D/g, '').substring(0, 10); // 只保留数字,限制长度为10 const formattedInput = input.replace(/^(\d{3})(\d{0,3})(\d{0,4}).*/, '($1) $2-$3'); // 格式化为 (xxx) xxx-xxxx setPhone(formattedInput); }; return ( <input type="tel" onChange={handleChange} value={phone} maxLength={14} // 限制输入长度为14,包括括号和破折号 /> ); }; export default PhoneInput; ``` 在上面的代码中,我们使用了 React 的 Hooks 来管理组件的状态,通过 useState 来保存用户输入的内容。在 handleChange 函数中,我们使用了正则表达式来去掉非数字字符,并使用 substring 函数来限制输入长度为 10。然后,我们使用 replace 函数将数字格式化为电话号码的形式。 最后,我们将格式化后的电话号码设置为组件状态的,并在输入框中显示出来。同时,我们通过 maxLength 属性来限制输入框的长度为 14,包括括号和破折号。 希望这个回答能够帮助你解决问题!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值