jQuery控制页面上多个text只能输入数字和小数点(支持动态添加的text)

djk8888

已于 2022-01-19 17:58:28 修改

阅读量908

点赞数 1

分类专栏： html jquery 文章标签： jquery javascript 前端

于 2022-01-19 16:29:11 首次发布

本文链接：https://blog.csdn.net/djk8888/article/details/122583659

版权

html 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

如果页面上的一个 text控件需要输入数字的限制,可以这样写:

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

如果需要限制输入的 text控件有非常多个,那每个text都需要↑↑↑上面这样写(其实也可以^^),但html就显得非常啰嗦,不够简洁....

少废话直接上代码...↓↓↓

jQuery代码:

<script>
    $(function () {
        //只能输入数字
        $(".intOnly").keyup(function () {//键盘keyup事件
            var value = $(this).val();//当前text对象,的值
            $(this).val(value.replace(/[^\d]/g, ''));
        });

        //只能输入数字和小数点和2位小数
        $(".decOnly").keyup(function () {//键盘keyup事件
            var value = $(this).val();//当前text对象,的值
            $(this).val(value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'));
        });
    });
</script>

*注: 如果text控件,是jQuery动态添加的,↑↑↑上面的方法会失效,请这样写(推荐):

<script>
    $(function () {
        //让jQuery动态添加的text的事件:
        $("body").on("keyup", ".intOnly", function () {
            var value = $(this).val();//当前text对象,的值
            $(this).val(value.replace(/[^\d]/g, ''));//只能输入数字
        });
        $("body").on("keyup", ".decOnly", function () {
            var value = $(this).val();//当前text对象,的值
            $(this).val(value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'));
        });
    });
</script>

html代码(不是每个text都需要输入数字的限制):

<table border='1'>
    <tbody id="myTb">
                <tr>
                    <td><input type="text" name="Month" readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM'})" /></td>

                    <td><input type="text" name="BigCategory" /></td>
                    <td><input type="text" name="Brand" /></td>
                    <td><input type="text" name="ProductClass" /></td>
                    <td><input type="text" name="ProductName" /></td>
                    <td><input type="text" name="ProductCode" /></td>

                    <td><input type="text" name="PLAN_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="PLAN_UnitPrice" class="decOnly" /></td>
                    <td><input type="text" name="PLAN_AMOUNT" class="decOnly" /></td>

                    <td><input type="text" name="SalesTarget_W1" class="decOnly" /></td>
                    <td><input type="text" name="SalesTarget_W2" class="decOnly" /></td>
                    <td><input type="text" name="SalesTarget_W3" class="decOnly" /></td>
                    <td><input type="text" name="SalesTarget_W4" class="decOnly" /></td>
                    <td><input type="text" name="SalesTarget_W5" class="decOnly" /></td>
                    <td><input type="text" name="SalesTarget_W6" class="decOnly" /></td>

                    <td><input type="text" name="JF_W1_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W1_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="JF_W2_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W2_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="JF_W3_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W3_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="JF_W4_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W4_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="JF_W5_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W5_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="JF_W6_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="JF_W6_AMOUNT" class="decOnly" /></td>

                    <td><input type="text" name="OTHER_W1_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W1_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="OTHER_W2_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W2_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="OTHER_W3_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W3_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="OTHER_W4_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W4_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="OTHER_W5_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W5_AMOUNT" class="decOnly" /></td>
                    <td><input type="text" name="OTHER_W6_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="OTHER_W6_AMOUNT" class="decOnly" /></td>

                    <td><input type="text" name="TransportationInventory" class="intOnly" /></td>
                    <td><input type="text" name="Expect_QUANTITY" class="intOnly" /></td>
                    <td><input type="text" name="PurchaseReason" /></td>
                    <td><input type="text" name="SalesPlan" /></td>

                    <td style='text-align:center'>
                        <input type="button" value="+" style="width:50px" onclick="AddRow()" class="btnClass" />
                    </td>
                </tr>
    </tbody>
</table>

*注: 需要控制数字输入的,添加 class="intOnly" 或 class="decOnly"即可

其他常用的输入数字限制:

只允许输入数字(整数：小数点不能输入)
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" > 
允许输入小数(两位小数)
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" > 
允许输入小数(一位小数)
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" > 
开头不能为0，且不能输入小数
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >