文本框数字每4位自动加空格分隔

数字输入格式化

最新推荐文章于 2022-11-21 12:33:24 发布

最新推荐文章于 2022-11-21 12:33:24 发布 · 243 阅读

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个JavaScript函数，该函数能够实现在用户输入数字时自动在每4位数字后添加空格的功能。通过简单的HTML和JavaScript代码，展示了如何监听文本框内的键盘事件并实时更新输入格式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            数字每4位加空格
        </title>
        <script type="text/javascript">
            window.onload = function() {
                var t = document.getElementById("test");
                t.onkeydown = change;
                t.onkeyup = change;
                t.onkeypress = change;
            }
            function change() {
                this.value = this.value.replace(/\D/g, '').replace(/....(?!$)/g, '$& '); //替换空格前4位数字为4位数字加空格
            }
        </script>
    </head>
    
    <body>
        <input type="text" id="test" />
    </body>

</html>