這裡蒐索程式師資訊,查找有用的技術資料
当前位置:首页 » 网页前端 » 前端金额数字输入框规范
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端金额数字输入框规范

发布时间: 2022-08-19 20:49:15

‘壹’ js支付宝的支付金额输入框怎么做的

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧:

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin值,那么HTML就是如下的样子:

<div class="input"><input type="tel" placeholder="随" maxlength=""><!--><input type="tel" placeholder="机" maxlength=""><!--><input type="tel" placeholder="" maxlength=""><!--><input type="tel" placeholder="位" maxlength=""><!--><input type="tel" placeholder="数" maxlength=""></div>

在代码中我们需要设置最多输入的位数,不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来,我们也需要设置type="tel"。那么接下来就是CSS样式的代码了,这里我就简单的贴出一些代码,具体高仿的像不像其实就是这里了~

input {display: inline-block;&:last-child {border-right: px solid #;}input {border-top: px solid #;border-bottom: px solid #;border-left: px solid #;width: px;height: px;outline:none;font-family: inherit;font-size: px;font-weight: inherit;text-align: center;line-height: px;color: #ccc;background: rgba(,,,);}}

那么接下来就是最关键的JavaScript部分了,

/*** 模拟支付宝的密码输入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input');for (var i = ; i < inputBtn.length; i++) {inputBtn[i].addEventListener('click', function () {inputBtn[active].focus();}, false);inputBtn[i].addEventListener('focus', function () {this.addEventListener('keyup', listenKeyUp, false);}, false);inputBtn[i].addEventListener('blur', function () {this.removeEventListener('keyup', listenKeyUp, false);}, false);}/*** 监听键盘的敲击事件*/function listenKeyUp() {var beginBtn = document.querySelector('#beginBtn');if (!isNaN(this.value) && this.value.length != ) {if (active < ) {active += ;}inputBtn[active].focus();} else if (this.value.length == ) {if (active > ) {active -= ;}inputBtn[active].focus();}if (active >= ) {var _value = inputBtn[active].value;if (beginBtn.className == 'begin-no' && !isNaN(_value) && _value.length != ) {beginBtn.className = 'begin';beginBtn.addEventListener('click', function () {calculate.begin();}, false);}} else {if (beginBtn.className == 'begin') {beginBtn.className = 'begin-no';}}}})(window, document);

首先我们对最外层的div进行监听,当发现用户选择div的时候就将input的焦点设置到active上面去,而这个active则是一个计数器,默认的时候是第一位的,也就是0,而当我们输入了正确的数字后将会增加一个active,这样input的焦点就会向后移动了,这样就完成了输入一个向后移动一位的功能了,而同时我们监听键盘上的退格键,当用户点击了退格键之后就对active减一,这样输入框的焦点也就向前移动了,当然,当input失去焦点的时候我们也同时移除绑定在上面的监听事件,这样就不会造成多次触发的问题了。

‘贰’ 前端input框中怎么用正则表达式限制只能输入小数点前最多7位,小数点后两位小数的数字

小数点前面可以不写任何数字,小数点前后均无数字则不匹配

‘叁’ 前端jquery怎么限制文本框输入数字的大小

监听文本框的onchange事件,来用JS判断当前数字的大小。
从而限制输入数字的大小
望采纳

‘肆’ JS如何限制文本框只能输入小写的金额,且首位不能输0,小数点后只能输入2位

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建带输入框的html文件,例如:index.html。

‘伍’ 大写金额书写规范

汉字大写数字金额如零、壹、贰、叁、肆、伍、陆、柒、捌、玖、拾、佰、仟、万、亿等,一律用正楷或者行书体书写,不得用0、一、二、三、四、五、六、七、八、九、十等简化字代替。

中文大写金额数字前应标明“人民币”字样,大写金额数字应紧接“人民币”字样填写,不得留有空白。大写金额数字前未印“人民币”字样的,应加填“人民币”三字。

(5)前端金额数字输入框规范扩展阅读:

在票据和结算凭证大写金额栏内不得预印固定的“仟、佰、拾、万、仟、佰、拾、元、角、分”字样;阿拉伯数字小写金额数字中有“0”时,中文大写应按照汉语语言规律、金额数字构成和防止涂改的要求进行书写。

阿拉伯数字中间连续有几个“0”时、中文大写金额中间可以只写一个“零”字,如¥6007.14应写成人民币陆仟零柒元壹角肆分。

‘陆’ HTML的金额输入框,三位一逗号的格式

边输入数字,边显示三位一逗号格式是因为调用的文本框的keyup事件,而你想要在全部输入完鼠标点击其他处才调用这种格式的话,可以改为失去焦点时调用,即可以将keyup事件换成blur事件,即失去焦点时事件;这样就可以实现你说的那种效果了。

‘柒’ js控制输入框只能输入数字金额,可以为负,否则自动截取掉

/*
匹配带正负号、小数点的数字
*/
functionisNumber(num){
if(num){
return/^-?d+.?d+$/.test(num);
}
returnfalse;
}


functionvalidElem(id){
if(id){
varelem=document.getElementById(id);

if(elem&&!isNumber(elem.value)){
//非数字
elem.value='';
returnfalse;
}
}
}