自定义数字、小数点号键盘

原创 2018年04月16日 13:00:41

效果图
这里写图片描述

HTML代码

<div class="keyboard">
            <div class="heng"><div class="key">1</div><div class="key">2</div><div class="key">3</div></div>
            <div class="heng"><div class="key">4</div><div class="key">5</div><div class="key">6</div></div>
            <div class="heng"><div class="key">7</div><div class="key">8</div><div class="key">9</div></div>
            <div class="heng"><div class="key">.</div><div class="key">0</div><div class="key" id="delete">退格</div></div>
</div>

CSS代码

.keyboard {
    width: 100%;
    height: 700px;
    position: fixed;
    bottom: 0;
    margin-left: -5px;
    margin-bottom: -10px;
}
.keyboard .heng {
    height: 170px;
    line-height: 170px;
    width: 100%;
}
.keyboard .heng .key {
    float: left;
    width: 33%;
    height: 170px;
    text-align: center;
    border: 1px solid #c2c2c2;
    background-color: white;
    color: #666;
    font-weight: 100;
}

JS代码 id为money的标签为输入框

<script type="text/javascript">

    moneyStr = '';
    $(".key").on('click', function() {
        totalStr = $("#money").val()
        long = totalStr.length

        var arr = totalStr.split('.')
        var left = arr[0]
        var right = arr[1]


        if (typeof(right) != 'undefined') {
            var leftLen = left.length
            var rightLen = right.length

            if ($(this).attr('id') != 'delete') {
                if (rightLen <= 1) {
                    if (leftLen <= 5) {
                        moneyStr += $(this).text()

                        $("#money").val(moneyStr)
                    }
                }
            }else {

                if (rightLen <= 2) {
                    if (leftLen <= 7) {


                        moneyStr = moneyStr.substr(0, parseInt(long)-1)
                        $("#money").val(moneyStr)
                    }
                }
            }

        }else {
            var leftLen = left.length
            if (leftLen <= 8) {

                if ($(this).attr('id') != 'delete') {
                    if (leftLen <= 7) {
                        moneyStr += $(this).text()
                    }                   
                }else {
                    moneyStr = moneyStr.substr(0, parseInt(long)-1)
                }
                $("#money").val(moneyStr)
            }
        }
    })

</script>

页面优化

1:

支付宝是在页面中的输入框,防止弹出系统键盘,input框为 disabled,千万别用 disabled,因为读不出来

微信支付使用ajax没关系

2: 加上下面这几行代码会让键盘效果更好

页面禁止缩放代码

<meta name="viewport" content="user-scalable=no">

页面禁止复制 css代码

body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
版权声明: https://blog.csdn.net/Liuboxx1/article/details/79959223

数字成像系统

-
  • 1970年01月01日 08:00

iOS带小数点的键盘

有时候,我们项目中难免会用到textField输入小数的情况,而且规定小数点后最多输入多少位的问题。 下面我来展示一下最多输入两位小数的情况,(这个多少位小数,看需求,我这里讲的是2位小数) 还是直接...
  • Ehome_hong
  • Ehome_hong
  • 2015-05-19 15:05:16
  • 1178

移动端html5带小数点的数字软键盘

  • 2016年06月16日 11:13
  • 2KB
  • 下载

android 自定义键盘(字母和标点符号键盘)

  • 2015年09月16日 16:24
  • 206KB
  • 下载

自定义软键盘,随机数字位置键盘

简介今天在掘金上看了一篇文章,实现自定义软键盘,发现其实实现方式比较简单,不需要改动系统api,只是单纯的加载自己的键盘布局,隐藏系统弹出的键盘,实现数字错位,安全输入软键盘,记录一下实现过程用于总结...
  • qq_34306963
  • qq_34306963
  • 2017-08-22 18:56:38
  • 479

VC 键盘 按键 虚拟码 表

符号常量   十六进制值  指定的鼠标或键盘按键 VK_LBUTTON   01   鼠标左键 VK_RBUTTON   02   鼠标右键 VK_CANCEL   03     Control...
  • chanchaw
  • chanchaw
  • 2012-05-12 21:42:12
  • 1341

android 自定义纯数字键盘输入

很久没更新博客了,最近在做一个新项目,遇到了很多坑,现将遇到的坑学到的东西一个个记录下来,方便自己和大家共同学习。后面还会抽出时间将项目中遇到的其他问题一一上传分析。项目中需要使用自定义数字键盘输入金...
  • LiuWaiter
  • LiuWaiter
  • 2017-06-30 10:59:13
  • 1092

[VC++]限制CEdit(Edit Contrl)只能输入数字和小数点

void CSettingcategory::OnEnChangeEdit2() { CString csAreaS; GetDlgItem( IDC_EDIT2 )->GetWindowText...
  • rundll64
  • rundll64
  • 2015-05-19 20:42:19
  • 652

android自定义控件-----自定义数字价格键盘

饿饿,好久没写android了,最近看到数字价格键盘挺有意思的就写来玩玩,省的做游戏java方面都要手生了!(话不多说,开始了)首先给图吧(绅士礼仪0。0)数字随机键盘价格数字键盘全键盘一、画键盘的x...
  • li15225271052
  • li15225271052
  • 2017-08-27 18:01:04
  • 660

UITextField keyboardType类型,加小数点键盘

在设置金额的时候,我们一般可以是熟人小数点的,这样就用 keyboardType = UIKeyboardTypeDecimalPad;...
  • qq_30023981
  • qq_30023981
  • 2016-09-08 12:06:21
  • 2949
收藏助手
不良信息举报
您举报文章:自定义数字、小数点号键盘
举报原因:
原因补充:

(最多只允许输入30个字)