<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!--<link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">-->
<link rel="stylesheet" href="./static/css/pay.css">
<link rel="stylesheet" href="./static/css/keyboard.css">
<title>输入金额付款</title>
</head>
<!--
通用说明：
1.模块的隐藏添加class:hide;
2.body标签默认绑定ontouchstart事件，激活所有按钮的:active效果
-->
<body>
<div class="weui-wepay-pay">
<div class="weui-wepay-pay__bd">
<div class="weui-wepay-pay__inner">
<h1 class="weui-wepay-pay__title">付款金额(元)</h1>
<div class="weui-wepay-pay__inputs"> <strong class="weui-wepay-pay__strong">￥</strong>
<input id="paymoney" type="text" class="weui-wepay-pay__input" placeholder="消费金额"></div>
</div>
</div>
</div>
<div></div>
<div class="payinfo">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="paynum">1</td>
<td class="paynum">2</td>
<td class="paynum">3</td>
<td id="pay-return"><div class="keybord-return"></div></td>
</tr>
<tr>
<td class="paynum">4</td>
<td class="paynum">5</td>
<td class="paynum">6</td>
<td rowspan="3" class="pay">支付</td>
</tr>
<tr>
<td class="paynum">7</td>
<td class="paynum">8</td>
<td class="paynum">9</td>
</tr>
<tr>
<td id="pay-stop"><div class="keybord-stop"></div></td>
<td id="pay-zero">0</td>
<td id="pay-float">.</td>
</tr>
</table>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="./static/layer/layer.js"></script>-->
<script type="text/javascript">
$(function(){
$(".payinfo").slideDown();
var $paymoney = $("#paymoney");
$("#pay-stop").click(function(){
$(".payinfo").slideUp("fast");
});
$("#paymoney").focus(function(){
$(".payinfo").slideDown();
document.activeElement.blur();
});
$(".paynum").each(function(){
$(this).click(function(){
if(($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2){
return;
}
if($.trim($paymoney.val()) == "0"){
return;
}
$paymoney.val($paymoney.val() + $(this).text());
});
});
$("#pay-return").click(function(){
$paymoney.val(($paymoney.val()).substring(0, ($paymoney.val()).length - 1));
});
$("#pay-zero").click(function(){
if(($paymoney.val()).indexOf(".") != -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length == 2){
return;
}
if($.trim($paymoney.val()) == "0"){
return;
}
$paymoney.val($paymoney.val() + $(this).text());
});
$("#pay-float").click(function(){
if($.trim($paymoney.val()) == ""){
return;
}
/*
if(($paymoney.val()).indexOf(".") != -1){
return;
}
*/
if(($paymoney.val()).indexOf(".") != -1){
return;
}
$paymoney.val($paymoney.val() + $(this).text());
});
$(".pay").click(function(){
layer.alert("支付的金额为："+$paymoney.val());
});
});
</script>
</html>
HTML5微信支付宝金额键盘带小数点
1星 需积分: 50 7 浏览量
2018-08-24
14:13:44
上传
评论
收藏 109KB ZIP 举报 
H5微信支付宝金额键盘带小数点.zip （30个子文件） 
H5微信支付宝金额键盘带小数点 HTML5微信支付金额键盘带小数点 
index.html 4KB static css 
keyboard.css 865B hospital.css 18KB order.css 37KB pay.css 3KB demos.css 637B images img 
suc-gaps.png 1KB wenli.png 1KB suc-ico-arrow.png 1KB ico-arrow-right-gray.png 1KB icon_nav_cell.png 196B icon_nav_article.png 425B icon_nav_msg.png 3KB icon_nav_button.png 1KB keybord-return.png 6KB keybord-stop.png 5KB layer skin default 
loading-2.gif 2KB icon.png 11KB loading-1.gif 701B layer.css 14KB icon-ext.png 6KB loading-0.gif 6KB layer.js 21KB mobile layer.js 3KB need layer.css 5KB js jquery.qrcode.min.js 14KB iscroll-min.js 26KB zepto.min.js 25KB pay.js 260B money.html 2KB资源评论
spener2019-05-22不能自适应，容易失真。
