uView Keyboard 键盘

简介: uView Keyboard 键盘

此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过mode参数定义键盘的类型,show绑定一个值为布尔值的变量控制键盘的弹出与收起:

  • mode = car (默认值)为汽车键盘,此时顶部工具条中间的提示文字为"车牌号键盘"
  • mode = number为数字键盘,此时顶部工具条中间的提示文字为"数字键盘"
  • mode = card 为身份证键盘,此时顶部工具条中间的提示文字为"身份证键盘"
<template>
  <view>
    <u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
    <u-button @click="show = true">打开</u-button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

copy

#隐藏键盘"."符号

  • 通过dotDisabled参数配置是否显示键盘"."符号,默认为false,只在"mode = number"时生效
<u-keyboard mode="number" :dotDisabled="true"></u-keyboard>

copy

#是否打乱按键的顺序

如果配置random参数为true的话,每次打开键盘,按键的顺序都是随机的,该功能默认是关闭的

<u-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></u-keyboard>

copy

#如何控制键盘的打开和关闭?

<template>
  <u-keyboard mode="number" :show="show"></u-keyboard>
</template>
<script>
  export default {
    onReady() {
      // 如果想一进入页面就打开键盘,请在此生命周期调用
      this.show = true;
    },
    onLoad() {
      // 不应在此调用,因为此时u-keyboard组件尚未创建完成
      // this.show = true;
    }
  }
</script>

copy

#如何监听键盘按键被点击?

  • 输入值是通过组件的change事件实现的,组件内部每个按键被点击的时候,组件就会发出一个change事件,回调参数为点击的按键的值。
  • 通过backspace事件监听键盘退格键的点击,通过修改父组件的值实现退格的效果,见下方示例

注意:点击退格键(也即删除键)不会触发change事件

<template>
  <u-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></u-keyboard>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        show: false
      }
    },
    methods: {
      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        // 将每次按键的值拼接到value变量中,注意+=写法
        this.value += val;
        console.log(this.value);
      },
      // 退格键被点击
      backspace() {
        // 删除value的最后一个字符
        if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
        console.log(this.value);
      }
    }
  }
</script>
相关文章
|
8月前
electron设置window系统托盘
electron设置window系统托盘
118 0
|
6天前
|
API 数据安全/隐私保护
uniapp中的uview组件库丰富的Keyboard 键盘 用法
uniapp中的uview组件库丰富的Keyboard 键盘 用法
150 0
|
6天前
|
数据安全/隐私保护
uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框
uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框
46 0
|
6天前
|
JavaScript
JS设置键盘快捷键、组合键
JS设置键盘快捷键、组合键
|
JavaScript
js组合键和单个键盘事件
js组合键和单个键盘事件
186 0
js组合键和单个键盘事件
HMI-5-[QtKeyEvent]:解决Qt键盘事件无法获取到上下左右等按键并实现键盘解析
HMI-5-[QtKeyEvent]:解决Qt键盘事件无法获取到上下左右等按键并实现键盘解析
371 0
HMI-5-[QtKeyEvent]:解决Qt键盘事件无法获取到上下左右等按键并实现键盘解析
|
图形学
Unity3D Input按键系统
默认输入轴:   Horizontal 和 Vertical被映射到w, a, s, d键和方向键   Fire1, Fire2, Fire3被分别映射到Ctrl,Option(Alt)和Command键   Mouse X 和 Mouse Y被映射到鼠标移动增量   Window Shake X...
1568 0
1112. Stucked Keyboard (20)
#include #include #include using namespace std; int main() { int k; string s; map ma; map mb; cin >> k >> s; for(int i = 1; i < s.
855 0