移动端input 既要启用数字键盘又要可以输入特殊字符

2024-09-07

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

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

移动端 input 输入框实现自带键盘“搜索“功能并修改X

主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" id="myform"> <input type="search" id="input" value="" placeholder="快速搜索" results="5" /&

六、input框中的数字（金额）只能输入正整数

关于移动端input框在微信中和ios中无法输入文字的问题

这个是一个提交的页面但是总是无法输入进去文字在uc中是可以的但是在微信中或者ios自带浏览器是无法输入的绞尽脑汁找了半天才发现自己多加了一段代码(这个代码是模版中自带的我靠) 代码如下 /*-webkit-user-select: none;/*禁掉用户可以选中页面中的内容,*/ 把这行代码注视掉就可以了至于这行代码作用是什么解释如下或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因.通常大家会有js来实现,另一个方案就是,将-webkit-u

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

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

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

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

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开

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

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

移动端底部input被弹出的键盘遮挡

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 移动端input被键盘遮挡,事件是跳到可视区域! document.querySelector('#inputId').scrollIntoView(); //只要在input的点击事件,或者获取焦点的事件还有一个事件是指定在上方或下方 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/s

input 手机数字键盘

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

input 弹起数字键盘的那些坑

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

移动端input输入框把页面顶起, 收起键盘页面复原不了问题

我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>> 我这边提供两种解决方案: 1. 针对 vue.js html: <input v-model="workWhere" @blur="changBlur"> js: methods: { changBlur(){ window.scroll(0,0);//失焦后强制让页面归位

input 呼起数字键盘

1. Android,定义 type="number" 2. iOS,定义 style="ime-mode: disabled;" 注,呼起数字键盘后,用户输入是否为纯数字,最大最小值限制,还是由 js 处理了. iOS 不支持设置 min/max

移动端input验证只允许有数字在safari浏览器一直不成功解决

<input class="lineHeight-30" type="text" onkeyup="value=value.replace(/[^\d$]/ig,'')" placeholder="请输入验证码" > 或者 <input id="numberbox" class="lineHeight-30" type="text" placehol

js输入密文弹出数字键盘

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

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

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

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

input属性控制弹出键盘类型

/** * ios弹起数字键盘有三种方法 * 1. <input type="number"> 可以弹起带有小数点的键盘,可以键盘不干净,有其它各种字符,可切换输入法 * 2. <input type="tel"> 可以弹起纯数字键盘,加#*特殊字符,不可以切换输入法,但没有小数点 * 3. <input type="text" pattern="\d*"> 可以弹起只有数字

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

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

移动端input“输入框”常见问题及解决方法

转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,输入法弹出后,fiexd失效,页面中定位好的元素随屏幕滚动. 针对这个问题,我们一起来看下以下几种方案: 方案一: Web API 接口 :scrollIntoView 的应用,将input输入框显示在可视区域. 1 // 输入框获得焦点时,元素移动到可视区域

移动端input 既要启用数字键盘又要可以输入特殊字符

热门专题