NumberKeyboard 数字键盘

介绍

非系统内置的虚拟数字键盘。

使用指南

点击输入框打开数字键盘

<tms-number-keyboard bind:input="handleInput"/>

Component({
    methods: {
      handleInput({ detail }) {
        console.log('当前输入框内容',detail.value);
      }
    }
})

拟物风格

<tms-number-keyboard style="simulacra"/>

扁平风格

<tms-number-keyboard style="flat"/>

小数类型

<tms-number-keyboard bind:input="handleInput" type="digit"/>

乱序类型

<tms-number-keyboard bind:input="handleInput" disorder/>

不使用默认输入框（自定义）

<tms-number-keyboard focus="{{customShow}}" custom value="{{customValue}}" bind:blur="handleCustomBlur"
                     bind:input="handleCustomInput">
    <view class="custom-input" bindtap="focusCustomInput">{{customValue}}</view>
</tms-number-keyboard>

Component({
    data:{
      customShow: false,
      customValue: '',
    },
    methods: {
      handleCustomInput({ detail }) {
        this.setData({
          customValue: detail.value,
        });
      },
      handleCustomBlur() {
        this.setData({
          customShow: false,
        });
      },
      focusCustomInput() {
        this.setData({
          customShow: true,
        });
      },
    }
})

API

属性	说明	类型	默认值	版本
value	输入框内容	string
placeholder	占位符	string
focus-placeholder	聚焦时的placeholder	string
maxlength	输入框内容最大长度	number	-1（无限制）
cursor-spacing	指定光标与键盘的距离 单位px	number	1
focus	聚焦输入框，弹出键盘	boolean	false
disabled	是否禁用输入框	boolean	false
disable-paste	是否禁用长按粘贴文本	boolean	false
custom	自定义输入框，不使用默认。	boolean	false
type	整数(number)或小数(digit)类型	string	number
style	键盘样式风格 flat/simulacra	string	flat
title	键盘上方标题 可为空	string
disorder	数字顺序随机打乱	boolean	false

EVENTS

属性	说明	类型
bind:focus	输入框聚焦弹起键盘事件	(event) => {}
bind:blur	点击其它区域键盘收起时触发	(event) => {}
bind:confirm	点击完成按钮事件	(event) => {}
bind:delete	删除/回退按键事件	(event) => {}
bind:input	输入内容改变时触发	(event) => {}
bind:push-up	输入框与键盘距离小于设定值时内容上推事件	({detail:{lackHeight,value}}) => {}

css变量

// 输入框高度
--number-keyboard-input-height: 50px;
// 输入框背景色
--number-keyboard-input-background: #FFF;
// 输入框文本颜色
--number-keyboard-input-color: #000;
// 输入框font-size
--number-keyboard-input-font-size: 16px;
// 输入框padding-left
--number-keyboard-padding-left: 5px;
// 输入框padding-right
--number-keyboard-padding-right: 5px;
// 输入框禁用时透明度
--number-keyboard-disabled-opacity: .6;
// 输入框z-index
--number-keyboard-z-index: 1002;
// 透明遮罩层z-index
--number-keyboard-mask-z-index: 1000;
// 键盘标题文本颜色
--number-keyboard-title-color: #999;
// 键盘标题font-size
--number-keyboard-title-font-size: 16px;
// 数字键文本颜色
--number-keyboard-key-color: #111;
// 数字键font-size
--number-keyboard-key-font-size: 50rpx;
// 数字键font-weight
--number-keyboard-key-font-weight: 500;
// 键盘完成按钮文本颜色
--number-keyboard-hide-text-color: #3d84ff;
// 键盘功能键区完成按钮背景色
--number-keyboard-simulacra-action-background: #5a97f9;

FAQ

当输入框位于页面底部时，上推页面并不能让输入框出现在正确的位置，需要补充页面高度，下面的demo提供了一种实现方案。

lackHeight：页面应该增大的高度，才能让输入框出现在期望的位置。

<tms-number-keyboard focus="{{focus}}" bind:blur="onBlur" bind:push-up="onPushUp"/>
<!-- 增加空元素填充高度 -->
<view style="height:{{lackHeight}}px"/>

Component({
    data:{
      lackHeight: 0,
      focus: false,
    },
    methods: {
      onPushUp({ detail }) {
        // 设置页面底部空元素的高度
        this.setData({
          lackHeight: detail.lackHeight,
        }, () => {
          // 调用focus，重新定位输入框位置。
          this.setData({
            focus: true,
          });
        });
      },
      // 键盘隐藏时将空元素高度恢复成0
      onBlur({ detail }) {
        this.setData({
          lackHeight: 0,
        });
      },
    }
})