input框限制输入金额

最新推荐文章于 2024-07-03 11:46:28 发布

9bai

最新推荐文章于 2024-07-03 11:46:28 发布

阅读量815

点赞数

文章标签：交互 p2p sql html

本文链接：https://blog.csdn.net/qq_19848269/article/details/121942816

版权

该博客探讨了如何实现输入框交互，特别是针对金额输入的优化。内容包括：输入默认显示'0.00'，鼠标移入时根据不同情况清理或优化内容，移除不必要的'0'和小数点，移出后恢复'0.00'。同时，输入限制为只允许数字和一个小数点，并且确保始终保留两位小数。示例代码包括HTML和JavaScript部分。

摘要由CSDN通过智能技术生成

交互内容：

输入前显示“0.00”
移入后如果是“0.00”则清空内容
移入后如果是“*.00”则去除后面的“.00”以方便填写
移入后如果是“*.*0”则优化成“*.*”，即去掉最后面的“0”以方便填写
什么都没写移出后又再次填充“0.00”
只能输入数字和小数点
仅能输入一个小数点
仅保留后面两个小数点

html部分：

<div class="mui-input-row">
    <label>金额<span>(元)</span></label>
    <input type="tel" class="capital mui-input-clear" value="0.00">
</div>

<style>
*{
    font-family:'microsoft yahei';
    height:30px;
    line-height:30px;
}
input{
    width:100px;
    border-radius:.3em;
    border:1px solid #ccc;
    padding-left:.5em;
    margin-left:.3em;
}
</style>

js部分：

/*投资本金仅能输入数字和小数点*/
var precapital;
document.querySelector('.capital').addEventListener('focus', function() {
    if (this.value == '0.00') {
        this.value = '';
    } else {