搜索
您的当前位置:首页正文

js金额文本框实现代码_表单特效

2023-12-03 来源:优库美食网

案例1:回车实现Tab跳转。 响应文本框的onKeyDown事件,window.event.keyCode获得用户点击的keyCode。 (*)keyCode和ASCII不是完全一致,主键盘的1和小键盘的1的ASCII一样,但是keyCode不一样。回车的keyCode为 13,Tab的keyCode为9。 只有少数的键才能被替换,大部分是不行的,有权限问题。 键盘码与ASCII码不一样。 keyCode 8:退格键 46:delete 37-40: 方向键 48-57:小键盘区的数字 96-105:主键盘区的数字 110、190:小键盘区和主键盘区的小数点 189、109:小键盘区和主键盘区的负号 13:回车 9: Tab 就是那个把焦点移到下一个文本框的东东。 案例2:金额文本框 财务相关系统中涉及到金额的文本框有如下要求: 进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千分位 禁用输入法:style=“ime-mode:disabled” //兼容FF、IE,不兼容Chrome 禁 止键入非法值,只有这些才能被键入(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)。 onkeydown="return numonKeyDown()" 不要写成onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。 禁止粘贴(伟大的 Tester),=48 && k<=56)){ }else{ return false; } } } } } 千分位(练习代码): 代码如下: function commafy(n) { var re=/d{1,3}(?=(d{3})+$)/g; //必须是以d{3}结尾,前面必须是1-3个数字,但替换的时候,不包含结尾的d{3}个数字。 var n1=n.replace(/^(d+)((.d+)?)$/,function(s,s1,s2){return s1.replace(re,“$&,”)+s2;});   return n1; } function addQianFenWei(txtBox) { txtBox.value=commafy(txtBox.value); } function removeQianFenWei(txtBox) { txtBox.value=txtBox.value.replace(/,/g,"");//如果是replace(',','')是只替换第一个 } 代码如下:

CSS部分

.pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; }/* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */.pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707;position:relative; font-size:0.36rem;}.pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem;font-size:0.45rem;}.pay-body{ padding-top:0.56rem;position:relative; height:7rem; box-sizing:border-box;}.pay-body.input-container{ width:6.74rem; height:0.93rem; border:1pxsolid#ebe8eb; overflow:hidden; border-radius:5px;background-color:#fff; margin:0auto; display:flex;flex-direction:row;align-items:center; flex-wrap:wrap; justify-content:center;align-content:center;}.pay-body.input-container.input-item{ width:1.1rem; height:0.92rem; display:inline-block; margin:0; border-right:1pxsolid#ebe8eb;text-align:center; line-height:0.92rem; border-radius:0; }.pay-body.input-container.input-item:nth-last-child(1){ border-right:0;}.pay-body.forgetPwd-container{width:6.74rem;margin:0.22remauto0; text-align:right;}.pay-body.forgetPwd-container.forgetPwd{ color:#52bfff; font-size:0.24rem; }.pay-body.key-container{ width:100%; height:4.56rem; position:absolute; bottom:0; display:flex;flex-direction:row;align-items:center; flex-wrap:wrap; justify-content:center;align-content:center; }.pay-body.key-container.key-item{ width:2.47rem; height:1.12rem; line-height:1.12rem; text-align:center; border-right:2pxsolid#f3f3f3; border-top:2pxsolid#f3f3f3; font-size:0.66rem; color:#1e1d1f;background-color:#fff;}.pay-body.key-container.key-item:nth-child(3),.pay-body.key-container.key-item:nth-child(6),.pay-body.key-container.key-item:nth-child(9),.pay-body.key-container.key-item:nth-child(12){ border-right:0;}.pay-body.key-container.key-item.remove,.pay-body.key-container.key-item.empty{ font-size:0.24rem;background-color:#e6e9f1;}.pay-body.key-container.key-item.remove{ background:url('../images/pay-remove.png') centerno-repeat#e6e9f1; background-size:.52rem.32rem; }.pay-body.key-container.selected{ background-color:#e4e8f4;}

核心JS部分

var arr = []; var num =0; //响应键盘事件 $('.key-item').on('touchstart', function () { $(this).addClass('selected') }) $('.key-item').on('touchend', function () { $(this).removeClass('selected') }) $('.key-item').on('click', function () { var value =$(this).text(); var inputItem =$('.layui-m-layercont .input-item'); if (!$(this).hasClass('remove')) { if (num <6) { $(inputItem[num]).val(value); if (num ==5) { var arr = []; for (var i =0; i < inputItem.length; i++) { arr.push(inputItem[i].value) } arr =parseInt(arr.join('')); if (arr !==123456) { layer.open({ content:'支付密码错误请重新输入!', skin:'msg', time:2//2秒后自动关闭 }); } else { layer.open({ content:'输入正确!', skin:'msg', time:2//2秒后自动关闭 }); } num++; returnfalse; } num++; } } else { if (num >0) { num--; $(inputItem[num]).val(''); } } })

代码就这么多,也不复杂。可能写的比较粗陋,但是效果能出来。

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

本篇文章给大家带来的内容是关于使用jquery实现类似于移动端支付宝的支付键盘,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种。由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现。话不多说,先上图看看效果。

尼玛,这不就是支付宝app那个支付键盘吗? 没错,咱们UI就是参照支付宝做的这个键盘。你可能会问,为什么不直接调用支付宝提供的支付接口呢。额,因为项目需要,这里就不多解释了。

我们先看一下实现后的效果图

HTML部分

<!-- 支付键盘 --> <divclass="pay-container"> <divclass="pay-title"> <spanclass="pay-title-remove">×</span> 输入支付密码 </div> <divclass="pay-body"> <divclass="input-container"> <inputclass="input-item"type="password"readonly> <inputclass="input-item"type="password"readonly> <inputclass="input-item"type="password"readonly> <inputclass="input-item"type="password"readonly> <inputclass="input-item"type="password"readonly> <inputclass="input-item"type="password"readonly> </div> <divclass="forgetPwd-container"> <aclass="forgetPwd"href="">忘记密码?</a> </div> <divclass="key-container"> <divclass="key-item">1</div> <divclass="key-item">2</div> <divclass="key-item">3</div> <divclass="key-item">4</div> <divclass="key-item">5</div> <divclass="key-item">6</div> <divclass="key-item">7</div> <divclass="key-item">8</div> <divclass="key-item">9</div> <divclass="key-item empty"></div> <divclass="key-item">0</div> <divclass="key-item remove"></div> </div> </div> </div>

CSS部分

.pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; }/* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */.pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707;position:relative; font-size:0.36rem;}.pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem;font-size:0.45rem;}.pay-body{ padding-top:0.56rem;position:relative; height:7rem; box-sizing:border-box;}.pay-body.input-container{ width:6.74rem; height:0.93rem; border:1pxsolid#ebe8eb; overflow:hidden; border-radius:5px;background-color:#fff; margin:0auto; display:flex;flex-direction:row;align-items:center; flex-wrap:wrap; justify-content:center;align-content:center;}.pay-body.input-container.input-item{ width:1.1rem; height:0.92rem; display:inline-block; margin:0; border-right:1pxsolid#ebe8eb;text-align:center; line-height:0.92rem; border-radius:0; }.pay-body.input-container.input-item:nth-last-child(1){ border-right:0;}.pay-body.forgetPwd-container{width:6.74rem;margin:0.22remauto0; text-align:right;}.pay-body.forgetPwd-container.forgetPwd{ color:#52bfff; font-size:0.24rem; }.pay-body.key-container{ width:100%; height:4.56rem; position:absolute; bottom:0; display:flex;flex-direction:row;align-items:center; flex-wrap:wrap; justify-content:center;align-content:center; }.pay-body.key-container.key-item{ width:2.47rem; height:1.12rem; line-height:1.12rem; text-align:center; border-right:2pxsolid#f3f3f3; border-top:2pxsolid#f3f3f3; font-size:0.66rem; color:#1e1d1f;background-color:#fff;}.pay-body.key-container.key-item:nth-child(3),.pay-body.key-container.key-item:nth-child(6),.pay-body.key-container.key-item:nth-child(9),.pay-body.key-container.key-item:nth-child(12){ border-right:0;}.pay-body.key-container.key-item.remove,.pay-body.key-container.key-item.empty{ font-size:0.24rem;background-color:#e6e9f1;}.pay-body.key-container.key-item.remove{ background:url('../images/pay-remove.png') centerno-repeat#e6e9f1; background-size:.52rem.32rem; }.pay-body.key-container.selected{ background-color:#e4e8f4;}

核心JS部分

var arr = []; var num =0; //响应键盘事件 $('.key-item').on('touchstart', function () { $(this).addClass('selected') }) $('.key-item').on('touchend', function () { $(this).removeClass('selected') }) $('.key-item').on('click', function () { var value =$(this).text(); var inputItem =$('.layui-m-layercont .input-item'); if (!$(this).hasClass('remove')) { if (num <6) { $(inputItem[num]).val(value); if (num ==5) { var arr = []; for (var i =0; i < inputItem.length; i++) { arr.push(inputItem[i].value) } arr =parseInt(arr.join('')); if (arr !==123456) { layer.open({ content:'支付密码错误请重新输入!', skin:'msg', time:2//2秒后自动关闭 }); } else { layer.open({ content:'输入正确!', skin:'msg', time:2//2秒后自动关闭 }); } num++; returnfalse; } num++; } } else { if (num >0) { num--; $(inputItem[num]).val(''); } } })

代码就这么多,也不复杂。可能写的比较粗陋,但是效果能出来。

js表单计算金额问题

我把你那个改成表格的了~这样比较好实现~代码如下:

<table width="600" border="1" align="center" style="text-align:center;">

  <tr>

    <td width="102"><input type="checkbox" id="all"/>全选</td>

    <td width="203">商品</td>

    <td width="119">单价</td>

    <td width="148">数量</td>

  </tr>

  <tr>

    <td><input type="checkbox" id="qianbi"/></td>

    <td>铅笔</td>

    <td>1.5元/支</td>

    <td><input type="text" id="qianbi_t" value="1" /></td>

  </tr>

  <tr>

    <td><input type="checkbox" id="yuanzhu" value="" /></td>

    <td>圆珠笔</td>

    <td>2.5元/支</td>

    <td><input type="text" id="yuanzhu_t" value="1" /></td>

  </tr>

  <tr>

    <td><input type="checkbox" id="gangbi" value="" /></td>

    <td>钢笔</td>

    <td>3元/支</td>

    <td><input type="text" id="gangbi_t" value="1" /></td>

  </tr>

  <tr>

    <td colspan="4">金额合计:<span id="m" style="color:#F00;"></span>元&nbsp;&nbsp;&nbsp;&nbsp;<button>提交订单</button></td>

  </tr>

</table>

<script type="text/javascript">

var all=document.getElementById("all");

var qianbi=document.getElementById("qianbi");

var yuanzhubi=document.getElementById("yuanzhu");

var gangbi=document.getElementById("gangbi");

var qb_m=0,yzb_m=0,gb_m=0;

all.onclick=function(){

if(all.checked){

qianbi.checked=true;

yuanzhubi.checked=true;

gangbi.checked=true;

}

else{

qianbi.checked=false;

yuanzhubi.checked=false;

gangbi.checked=false;

}

sub();

};

qianbi.onclick=function(){sub()};

yuanzhubi.onclick=function(){sub()};

gangbi.onclick=function(){sub()};

document.getElementById("qianbi_t").addEventListener("change",function(e){

sub();

});

document.getElementById("yuanzhu_t").addEventListener("change",function(e){

sub();

});

document.getElementById("gangbi_t").addEventListener("change",function(e){

sub();

});

function sub(){

if(qianbi.checked){

qb_m=document.getElementById("qianbi_t").value*1.5

}

else{

qb_m=0;

all.checked=false;

}

if(yuanzhubi.checked){

yzb_m=document.getElementById("yuanzhu_t").value*2.5

}

else{

yzb_m=0;

all.checked=false;

}

if(gangbi.checked){

gb_m=document.getElementById("gangbi_t").value*3

}

else{

gb_m=0;

all.checked=false;

}

var sum=qb_m+yzb_m+gb_m;

document.getElementById("m").innerHTML=sum;

}

</script>

 复制到网页的body中去就行了~试试看~不懂得再来问我~

优库美食网还为您提供以下相关内容希望对您有帮助:

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

那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。并且给这个5个input设置display: inline-block 属性,同...

javascript代码实现

1)布局排版 2)鼠标移上文本框发光效果实现:给文本框取一个ID号,如txtInput,设置如下CSS样式:#txtInput:hover{box-shadow:0px0px 5px 0px #0000ff; },其中#txtInput:hover表示鼠标移上ID为txtInput的网页元素。

如何用JavaScript往表单中添加文本框

下面实例演示用第二种方法往表单中添加文本框:1、HTML结构 2、javascript代码 function fun(){var ipt = document.createElement("input");ipt.setAttribute("type","text");ipt.setAttribute("name","test");var div =...

js表单计算金额问题

我把你那个改成表格的了~这样比较好实现~代码如下: 全选 商品 单价 数量 铅笔

急!急!急!文本框里面输入一个数字,旁边显示出计算的价格,用js做怎么写...

id="result" value="" onclick="calcu()" size=40&gt; function calcu(){ document.getElementById("result").value="不知道怎么算什么,没法写代码,这儿是结果"}

js如何实现点击标签文字,文字在文本框出现_javascript技巧

.label {cursor:pointer}JS特效C++SQL脚本之家效果图:这里再为大家分享另一个Javascript的小技巧---JS实现点击文本框清除表单内部默认文字,有时大家在填写表单内容时,表单里会出现一些默认提示文字,我们又不想一个个删除...

要在jsp页面上进行javascript动态计算,要求输入框每输入一个数字都会进...

参考代码:var num1=document.getElementById('表单1id名').value;var num2=document.getElementById('表单2id名').value;var num3=document.getElementById('综合考核表单的id名');num3=num1+num2;注意在表单1和...

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

html编辑器、浏览器。1、首先,打开html编辑器,新建带输入框的html文件,例如:index.html。2、在index.html的标签中,输入js代码:。3、浏览器运行index.html页面,此时文本框只能输入满足条件的数,例如3.14。

...在HTML5中用JS代码计算小计和总金额的程序代码!谢谢了!急急急急...

border:1px solid black; }td&gt;input[type=text]{width:50px;text-align:center;}onload = function(){var tbody = tab.tBodies[0];var rows = tbody.rows;var texts = tbody.getElementsByTagName("input");for...

怎么让JS实现在文本框中输入数字时,同时输出这个数字,并再输出一个乘以...

body,td,th { font-weight: bold;} 1cm=0.39inch (厘米自动换算成尺寸)当我在文本框中填入数字后,想让下面的表格同时显示两组数据,第一个要显示本身的数据,第二个要显示乘以0.39的数据。我现在输入数据后,让第...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top