input 弹起数字键盘的那些坑

input ios 踩的大坑前言:最近有个需求要将全平台的交易密码由原来的 6-16位复杂密码改为6位纯数字交易密码,涉及到非常多的业务场景,但修改起来也无非两种:设置交易密码,使用交易密码设置交易密码: 普通长条输入框.弹起数字键盘.支持明暗文切换查看使用交易密码: 显示六个格子.弹起数字键盘先来说说第一种,设置交易密码要求弹起数字键盘,maxlength=6 ,支持明暗文交换由于 type=password 不能调起数字键盘,还想展示暗文,于是找到了一个css 属性 -webk…

input 手机数字键盘

要一点击提起数字键盘,安卓只要设置input的类型是number或tel, ios 需要 pattern="number"可以直接打开搜狗输入法的数字键盘,可以输入.和数字如果只能输入数字,比如输入手机号或银行卡号,则是pattern="[0-9]*" 可以调九宫格提起数字和小数点键盘:<input type="number" name="cashWthdrawal" pattern="number"…

H5 input默认数字键盘，显示为密码格式

<P> <span class="yzname w25">银行密码</span> <input class="j_password" type="number" style="-webkit-text-security:disc" placeholder="请输入银行密码"> </P>…

一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技? 宝宝也是被逼的,宝宝也很委屈~.~ 问题产生背景移动端H5项目需求点: 进入某页面自动弹出带小数点的数字键盘,并且自带输入验证,比如金额——只能输入数字和小数点,并且只能输入一位小数点.小数位不超过2位,且输入前验证不合法就不让输入.(UE特加功能——定制光标颜色>.<简直是反人类的需求).…

h5 调起ios数字键盘的坑，限制特殊字符输入方案

最近有个需求是利率只允许输入数字和小数点,用以下 <input type="number" pattern="[0-9]*"> 在ios会调起数字键盘,但是左下角竟然是空不是“.”! 这个坑相信很多移动端h5开发会遇到,需支持小数点那就不能调起这种键盘了,那只能调起以下键盘 <input type="number"> 但是问题又来了ios系统的type="number"竟然不能自动限制输入特殊字符! 那…

input 密码框调出手机的数字键盘

对于某些密码,想要在手机上调出数字键盘,同时要隐藏文字.可结合type=tel和 text-security属性达到目的. input{ -webkit-text-security:disc; text-security:disc; /*使用指定形状代替文字显示 circle圆圈 disc 圆形 square 正方形*/ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="…

【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）

在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头后续:与UI沟通后, 思路调整为限制输入,并减少正则替换输入值出现的闪动.后续改动如下,注意点如下: 1.处理思路 A.在用户输入的键盘事件中,对于不符合的输入,阻止默认行为和事件冒泡. 不符合输入的规则如下: 1)当前输入框中的长度大于等于配置的max 2)非数字和小数点 3)当前输入框中已存在小数点,或第一位输入小数点 B.在获取值后,对于不符合…

手机端访问web调用数字键盘。

转自 http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最终的结论却令人沮丧.不过也趁机详细了解了下pattern这个属性. type="tel" 和 type="number" 的区别这里还是先那么先交代一下最初遇到的问题.其实无论是tel…

js Date 函数方法和移动端数字键盘调用

var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开…

JS数字键盘

JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; margin:; padding: 2px; position: relative; visibility: visible !important; width: 285px; } #numberkeyboard .numbtn { -moz-border-radius: 4px; /* Geck…

[HTML5]移动开发不同手机弹出数字键盘问题

这里还是先那么先交代一下遇到的问题.其实无论是tel还是number都不是完美的:type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余,虽然我没有强迫症但还是感觉怪怪的啊. type="number"优点是Android下实现的一个真正的数字键盘缺点一:iOS下不是九宫格键盘,输入不方便缺点二:旧版Android(包括微信所用的X5内核)在输入框后面会有超级鸡肋的小尾巴,好在Android 4.4.4以后给去掉了.不过对于缺点二,我…

小程序 input type number 键盘没有小数点

在此备注一下: <input type="digit"> number:数字键盘(无小数点)idcard:数字键盘(无小数点.有个 X 键)digit:数字键盘(有小数点) 注意:number 是无小数点的,digit 是有小数点的 .…

h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo,采用h5+原生js开发,含有微信.支付宝两种键盘皮肤,可自定义普通键盘.最大值输入限制.密码键盘/电话号码键盘验证,一个页面可初始化多个键盘且输入互不冲突. 插件使用相当方便,只需引入 <script src="wcKeyboard.js"></script> /…

SenchaTouch调用纯数字键盘

items:[ { itemId:"phoneNumber", xtype: "textfield", component:{xtype:"input",type:"tel"}, //这个属性标识输入框为tel类型,则会调用纯数字键盘,ios android 都测试ok placeHolder:"输入手机号", maxLength:11 } ] 以上代码可以调用出手机的纯数字键盘,不能切换,适用于输入手机号…

基于jQuery的数字键盘插件

有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要是多个小数点就有13个键,不好排列了,呵呵).支持鼠标拖动和触摸拖动,可关闭. 在线演示 1.页面代码 <ul> <li><input type="text" placeholder="手机号码后四位" id="numkeyboa…

jQuery 虚拟数字键盘代码

先上效果: js直接应用: $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="text" onkeyup="if (this.value==this.value2) return; if (this.value.search(/^\d{0,4}$/)==-1) this.value=(this.value2)?this.value2:'';else this.value2…

js输入密文弹出数字键盘

我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢? 1.首先要弹出数字键盘,我们只能把input框的type从password改为tel 2.但经过第一步,输入的内容会变成明文,这时候也要星号显示,改怎么实现经过一番研究,找到如下的实现方法: function setPass(e) { var target = e.currentTarget, idx = target.selectionStart, val = $(target).v…

iOS 系统数字键盘左下角加确定按钮

首先在 viewWillAppear 方法中注册监听相应的键盘通知,并且要在 viewWillDisappear 方法中注销通知- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; //注册键盘显示通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleKeyboardDidShow:) name…

iOS数字键盘自定义按键

UIKeyboardTypeNumberPad 数字键盘自定义按键最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: self.searchBar.keyboardType = UIKeyboardTypeNumberPad; 如果使用的不是搜索框而是textField输入框,可以设置textField的键盘属性来展示 self.textField.keyboardType = UIKeyboardTypeNum…

如何使用alt键+数字键盘上的数字键打出特殊符号

如何使用alt键+数字键盘上的数字键打出特殊符号有时当我需要画示意图说明一个问题,但是苦于没有合适的符号,因此,这篇博文将简单介绍一些特殊的符号方便自己以及大家使用. 实现原理很简单:所有的字符(包括字母.数字.汉字甚至是其他文字)在计算机内部都是以编码的形式存储的,比如其中小于127的称为标准ASCII编码,汉字也是有编码的,编码标准为GBK,在45687-63486之间存储着常用的6763个汉字.41377-43518存储者一些图形符号.43072-43424之间存储着一些非汉字符号.…

ubuntu 16.04 小键盘数字键盘开机自动启动

ubuntu 16.04 小键盘数字键盘开机自动启动最近安了ubuntu 16.04,用windows用久了,换一个也挺好玩的! 但ubuntu 16.04因为算是最新的吧,还是存在些令我们不适应的地方,建议去下15或14版本,本文就解决小键盘数字键盘不能开机自动启动的问题. 首先,需要安装一个小软件,在终端中执行以下: sudo apt-get install numlockx 然后编辑: sudo gedit /usr/share/lightdm/lightdm.conf.d/50-uni…

pjsip视频通信开发(上层应用)之数字键盘的制作

在pjsip视频通信开发(上层应用)之EditText重写中我制作了一个显示输入内容的EditText,这里将制作一个数字键盘,其实跟计算器一样,最多的就是用TableLayout来实现,内部通过权重(weight)来实现布局的统一,上层实现按键事件触发回调实现内容的输出. 键盘布局: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://sch…

（译）iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0)

(译)iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0) 更新:ios4.1现在已经将这个做到SDK了.你可以设置键盘类型为UIKeyboardTypeDecimalPad!完成! 在开发iphone程序的时候你可以选择各种键盘.其中的数字面板却没有带小数点.在底部的左下角有一个空白按钮,什么作用都没有.所以我将向你展示怎么将一个小数点按钮放在那里,看起来像这样的: 有一些其他的教程向你展示如何做到这样,但是我相信我的更好.因为代码简单易用,更灵活,并且UI颜色…

iOS8数字键盘加左下角完成button

iOS8数字键盘加左下角完成button的核心代码如下面: - (void)addDoneButtonToNumPadKeyboard { UIButton *doneButton = [UIButton buttonWithType:UIButtonTypeCustom]; if (systemVersion < 8.0){ doneButton.frame = CGRectMake(0, 163, 106, 53); }else{ doneButton.frame = CGRectMake(…

ios自定义数字键盘

因为项目又一个提现的功能,textfiled文本框输入需要弹出数字键盘,首先想到的就是设置textfiled的keyboardType为numberPad,此时你会看到如下的效果: 但是很遗憾这样设置虽然出现了数字键盘,但是对于我们提现的这个功能来说是需要小数的,所以需要一个小数点但是使用上面的键盘显然不能满足我们的需求,那么应该如何解决这样的问题呢? 想了一下,有两个方法取实现: 1.自定义一个键盘视图 2.在系统键盘的基础上修改经过思考,自定义键盘代价太大,所以我才用了第二种方法.…

小程序中点击input控件键盘弹出时placeholder文字上移

最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的"当获取焦点时,将fixed的元素改为static;失去焦点,再改回fixed"的方法,然而行不通,我试着给input加了个边框,然而当软键盘弹出时input框并没有移动,仅仅是input中的placeholder上移了,因此只能想到了让placeholder文字在聚焦是为空,在失焦是显示为指定值一下…

页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景

微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动 var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); if(wechatInfo){ $("input,textarea").blur(functi…

【PyQt5-Qt Designer】简易的数字键盘输入+简易计算器

参考如下键盘格式写了一个键盘输入,目前还不能进行运算,后期完善... 效果如下: 完整代码: from PyQt5.QtWidgets import (QApplication,QWidget,QPushButton,QLCDNumber,QFormLayout,QLineEdit,QLabel,QGridLayout) from PyQt5.QtGui import QFont from PyQt5.QtCore import Qt,QTimer,QDateTime,QDate,QTime,Q…

IOS下 input 被软键盘方案遮盖问题解决

前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出现 input 被软键盘遮盖或者半遮盖.甚至发送按钮不能点击的状况. 总的来说问题有点小严重. 查阅百度: 好的,百度一搜,哇!解决方案很多,我就放心的去抽了一根烟,想着分分钟完事.BUT 经过试验百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的!!! 不过收获还是有的…

UIKeyboardTypeNumberPad 数字键盘添加完成按钮

一:添加通知 //数字键盘添加完成 [[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(keyboardWillShow:) name:UIKeyboardDidShowNotificationobject:nil]; 二:数字键盘出现添加 //键盘处理 - (void)keyboardWillShow:(NSNotification *)note { UIButton *doneButton = [UI…

【input 弹起数字键盘的那些坑】的更多相关文章