金额文本框

最新推荐文章于 2024-03-22 18:03:38 发布

原创最新推荐文章于 2024-03-22 18:03:38 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript限制文本框中输入金额的方法，并实现了金额的千分位格式化显示。通过监听键盘事件和粘贴操作来确保只允许输入有效的数字字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<title>金额文本框练习点评</title>

//刚开始的写法：

/*
function numKeyDown() {

            var k = window.event.keyCode; //得到键盘输入的字符的ascii
            //下面的思路是判断k的值是否是合法的ascii码
            if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 &&
k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) {
                return true; //如果是上面的值的话则返回true
            }
            else {
                return false;//否则返回false
            }
        }

var text = "He0ao World";

        //alert(text.charAt(1));
        //alert(text.charCodeAt());

        function numPaste() {
            var text = window.clipboardData.getData("Text"); //获取到剪贴板中的文本
            for (var i = 0; i < text.length; i++) {//遍历剪贴板中的文字内容
                var asc = text.charCode(i);//charAt(i)得到的是某个字符，而charCodeAt(i)得到的是ascii码
            }
        }
        */

//后来的写法:

function numKeyDown() {

var k = window.event.keyCode; //得到键盘输入的字符的ascii
//下面的思路是判断k的值是否是合法的ascii码

            /*
            if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 &&
k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40)) {
                return true; //如果是上面的值的话则返回true
            }
            else {
                return false; //否则返回false
            }
            */
            return isValidNum(k);//调用验证的函数,这段代码等于上面那些代码
        }

        //校验输入的内容是否符合要求
        function isValidNum(k) {//始终记住，js中的函数没有返回值的概念

            return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 &&
k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));//后面这些代码块都是if里面的，if里面的判断条件是一个bool条件

        }

        //处理粘贴板中的代码
        function numPaste() {
            var text = window.clipboardData.getData("Text"); //获取到剪贴板中的文本
            for (var i = 0; i < text.length; i++) {//遍历剪贴板中的文字内容
                var asc = text.charCodeAt(i); //charAt(i)得到的是某个字符，而charCodeAt(i)得到的是ascii码

//下面的思路就是判断得到的那个字符是否符合要求了，这个时候就想办法准备一方法提供给这里调用

                if (!isValidNum(asc)) {//遇到一个非法值就认为是要粘贴的内容是非法的return false
                    return false;//返回false
                }
            }
        }

//测试一：
//"".replace()//注意一个细节，js中的replace方法第一个参数是一个正则表达式，第二个参数才是要替换的内容

//例如： "".replace(/,/g, text);//第一个参数/,/g表示匹配所有的逗号，字母g表示全部的意思

//测试二：
//t.style.textAlign

        //添加千分位函数
        function commafy(num) {
            num = num + "";
            var re = /(-?\d+)(\d{3})/
            while (re.test(num)) {
                num = num.replace(re, "$1,$2")
            }
            return num;
        }

</script>

</head>
<body>

禁用切换输入法<input id="t" style="ime-mode:disabled;" /> <br />

显示输入的键盘码<input type="text" onkeydown="alert(window.event.keyCode);" /><br />

禁用输入法只能输入数字<input type="text" onpast="return numPaste()" onkeydown="return numKeyDown();" style="ime-mode:disabled;" /><br />

实现千分位<input type="text" onfocus="this.style.textAlign='left';this.value=this.value.replace(',','');" onblur="this.style.textAlign='right';this.value=commafy(this.value)" />

<br />

光标移入移出的不同表现<input type="text" onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g ,'');" onblur="this.style.textAlign='right';this.value=commafy(this.value)" />

</body>
</html>