素材牛VIP会员

移动端HTML5虚拟键盘效果

 所属分类:网页特效-表单特效,输入框

 浏览:206次  评论:3次  更新时间:2023-03-16
牛币素材VIP可免积分下载
移动端HTML5虚拟键盘效果
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:适用于整数,小数,身份证输入的键盘;减轻开发参数校验的压力~

详细介绍

使用方法

1.  必须引入的资源文件

 <!-- 核心样式【必须引入】 -->
<link rel="stylesheet" href="./css/mobile-keyboard.min.css">
<!-- 核心JS【必须引入】 -->
<script src="https://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="./js/mobile-keyboard.min.js"></script>

主题:带min的,是生产环境使用,因为压缩过,体积更小!

2. 输入框初始化

<input type="text"  placeholder="纯数字类型" />
<input type="text"  placeholder="小数类型" />
<input type="text"  placeholder="身份证" />
<script>
    // 键盘初始化参数 type: {纯数字 = 0, 小数 = 1, 身份证 = 2}
    $('.num').bind("click", function(){
        $(this).mobileKeyboard({type: 0});
    });

    $('.float').bind("click", function(){
        $(this).mobileKeyboard({type: 1});
    });

    $('.idcard').bind("click", function(){
        $(this).mobileKeyboard({type: 2});
    });
</script>

3. 开发该键盘的目的:移动端原生键盘,

①没有仅支持小数和数字的键盘;

②没有仅支持身份证使用的键盘,数字和字母x;所以开发这款键盘,支持原生webview内嵌h5使用。

4. 该工具有什么特点:

①屏蔽了原生键盘;

②屏蔽了原生键盘后,模拟了原生输入框中的焦点,用户可以感知到当前输入框的状态。

5. 愉快的使用吧~

文件目录结构

  • css
    • ┝ demo.css
    • ┝ mobile-keyboard.css
    • ┝ mobile-keyboard.min.css
  • ┝ index.html
  • js
    • ┝ jquery-3.4.1.min.js
    • ┝ mobile-keyboard.js
    • ┝ mobile-keyboard.min.js

相关素材 - 表单特效,输入框

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

ab***ai  
2023年07月27日

66666

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:16 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)