说明:此技术使用场景有限,项目如果需要部署到触摸大屏端,为了解决文字输入问题,就需要屏幕虚拟键盘,这种技术Github上面也有, 基本上以英文输入为主, 找的几个中文原生的用起来也不方便, 索性改造一个的想法!

源码下载

源码结构

  • chinese-pyntrad.js(字典)
  • dictionary.js(字典)
  • keyboard.js(相关方法事件,可根据自己需求修改)
  • keyboard.vue(视图, 可以当作组件用)

用法

输入框

    <div class="search">
      <input name="inputArea" id="inputArea" :placeholder="placeholder" v-model="value"/>
      <input type="button" value="确定" @click="searchAseetesProd"/>
    </div>

引入组件后使用

	
	<div v-if="placeholder === '请输入身份证'">
          <keyboard :placeholder="placeholder" @getSearchValue="getSearchValue" />
        </div>

[效果]

微信截图_20200615155837

BUG: 页面需要通过if判定,让页面同时只渲染一个, 多个会出现无法输入中文

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

脸朝大海, 春暖花开 ----江大脸