移动端苹果手机的input框type= number只是唤起数字键盘，但是还能输入汉字

最新推荐文章于 2023-02-07 10:27:33 发布
最新推荐文章于 2023-02-07 10:27:33 发布
阅读量2k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16704959/article/details/104850633
版权

1、今天临下班之前测试突然测出这个BUG，一开始还觉得纳闷，input已经设置成number了啊，为啥还是可以输入汉字，效果复现之后，蒙蔽了，WC；

　  搜了很多资料发现只有IOS才有这个问题，试了好几种办法，一开始使用正则替换发现并没有什么效果，后来有加了pattern="[0-9]*"发现也没什么效果；　　

2、最终解决办法

 <input class="effect-16" type="tel" pattern="[0-9]*"  v-model.number="" @blur="effectActive($event)" >

　　

xuexiaochai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
高级前端工程师
05-13 9772
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
JS表单提交验证、input（type=number） 去三角 刷新验证码
10-19
本篇文章将探讨如何使用JavaScript进行表单提交验证，特别是针对`<input type="number">`字段以及如何去掉数字输入框的上下箭头，并介绍如何实现验证码的刷新功能。 首先，当需要对表单进行验证时，可以监听表单的`...
移动端中ios不兼容input的type="number"
周不会前端的博客
03-10 2405
今天做移动端的时候一个选择数量的我在pc上是正常的禁用英文了 用的type="number" 但是测试的时候在ios上看到还是能输入英文 我就想到ios兼容问题 在网上看到的办法就是 只调用数字键盘就ok了 <input type="number" pattern="[0-9]*" /> ok 加上了type="number"就可以了 ...
【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）
weixin_30505225的博客
01-04 791
在Vue中的项目，基于VUX-UI开发，一个常见的需求： 1、金额输入框 2、弹出数字键盘 3、仅支持输入两位小数，限制最大11位数，不允许0开头　　 后续：与UI沟通后， 思路调整为限制输入，并减少正则替换输入值出现的闪动。后续改动如下，注意点如下： 1、处理思路 　　A。在用户输入的键盘事件中，对于不符合的输入，阻止默认行为和事件冒泡。 　　　　不符合输入的...
移动端苹果手机的input框type= number只是唤起数字键盘 不能阻止输入汉字和字母
web_zq的博客
06-05 6258
移动端苹果手机的input框type= number只是唤起数字键盘 不能阻止输入汉字和字母 ， input事件的replace(正则，’’)没有作用 解决办法 用input type = text 后再用input事件的replace(正则，’’) 可以实现 输入框的实时校验 ...
html输入框中文问题,移动端input框type为number仍可以输入中文的问题
weixin_33662445的博客
06-09 1302
本文主要针对IOS做了测试，对安卓测试较少，但问题应该是通用的。首先这个问题非常棘手，因为这可能是浏览器的一个bug，当用户在type=number的input框输入中文时，这个值其实并不会被接收，但是有时会被展现。即：它会像普通值一样显示，但是双向绑定的参数接收不到中文值，一般为空字符串。type=number会吊起数字键盘，很多产品设计倾向于此，但是目前来看各系统(浏览器)对此兼容并不好。这类...
【IOS】移动端设置input只能输入数字，在IOS系统没有效果
疾术客
12-06 922
在移动端设置input的type为number类型的时候需要区分一下安卓还是IOS，如果只设置type为number类型的时候，在安卓生效，但是IOS还是会有可以输入汉字的问题出现，所以就需要一个新的属性（pattern="[0-9]*"）来控制输入的类型。具体如下： <input type="number" pattern="[0-9]*" placeholder="请输入..." ...
小程序，使用uni组件，input中使用type = “number“时在微信开发者工具中仍可以输入字母、汉字
weixin_46706668的博客
07-14 1716
写小程序，遇到使用uni组件，input中使用type = "number"时在微信开发者工具中仍可以输入字母、汉字。 我想实现这个效果，但是根据官网写input的type属性时，在微信开发者工具中调试并不起作用，而我使用uni官网例子，很明显使用type属性时可以实现只能输入数字这个效果。 然后仔细阅读了一下官方说明，发现是微信开发者工具是不支持的，使用手机真机调试时这个效果是实现了的。 ...
完美解决input[type=number]无法显示非数字字符的问题
12-01
在移动端Web开发中，我们经常会遇到输入框（`<input>`）的需求，特别是涉及到数字输入时，使用`type="number"`的属性可以调出设备的数字键盘，方便用户输入整数或小数。然而，`type="number"`有一个限制，那就是它只...
Quasar Input:type=number 去掉上下小箭头 实现加减按钮样式功能
12-28
input type=”number” 去掉上下小箭头 去掉上下小箭头，主要是css: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-...
input type=file 调取手机照相机和选择照片上传
12-17
本文将深入探讨如何使用 `input type="file"` 激活手机的照相机功能以及选择图片上传。 首先，`<input type="file">` 是HTML中的一个表单元素，它的主要作用是让用户选择本地文件。在默认情况下，点击这个元素会...
el-input设置type=“number”时，切换为中文输入法输入会让光标上移的bug
想好了再写！
02-07 419
el-input设置type="number"时，切换为中文输入法输入会让光标上移的bug。
【苹果手机端键盘只显示数字】
虑而后能得
11-11 3230
前言 最近做的这个项目里，在电脑上测试很正常，但是在手机端上测试的时候，苹果的手机端却只显示数字，如图 那么这个问题是怎么回事呢，通过和一个师姐的讲解，发现了这个问题的根源。那么怎么想的呢，我们想着既然是输入的形式有问题，那么就从代码的输入形式那里去找，和数字相关的就只有pattern这一块。所以我查了一下 里面的话让人明白了，type = “text” pattern="[0-9]*" 在安卓...
解决input type=“number”在ios弹起软键盘兼容问题，并验证输入的值
总结前端开发中遇到的问题，分享前端知识
12-09 1636
实现效果ios 下不能输入中文等特殊字符，除了小数点. vue使用原生input时候出现的问题：ios下中文输入验证问题 解决方式： 1. <input type="text" v-model.trim="priceAll" inputmode="decimal" placeholder="0.00" @keyup="handlePrice(priceAll)"/> HTML 原生的type="number"属性在 iOS 和 Android 系统上都存在一定问题，比如 ma...
h5 android数字键盘,【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）...
weixin_32899267的博客
05-27 710
在Vue中的项目，基于VUX-UI开发，一个常见的需求：1、金额输入框2、弹出数字键盘3、仅支持输入两位小数，限制最大11位数，不允许0开头第一，首先想到额就是在VUX-UI中制定type=number。--不可行VUX中的文档和代码说明，type=number不支持maxLength，会报错，而且没有正则替换的处理或者钩子函数，只有输入后提示校验信息。第二，基于VUX中XInput封装，有如下问...
H5 - input标签iOS原生键盘中文录入异常
iotjin的专栏
01-12 1326
最近在input搜索框中添加正则时发现，iOS原生键盘录入中文总是录入异常，安卓手机无异常，出现异常的写法： html <input id="inputId" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="请输入" maxlength="30" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">
Android输入框限制中文,开发时遇到的问题记录一下：移动端ios、Android中input框输入限制问题（ionic）...
weixin_39956451的博客
05-28 309
开发时遇到的问题记录一下：移动端ios、Android中input框输入限制问题(ionic)IOSinput标签里：type=“tel”： 直接调起ios的数字键盘(ios数字键盘没有小数点)；删除小数点后一位时，小数点 直接删掉。type=“number”： 全键盘可以任意输入，没有只能输入数字的限制Androidtype=“tel” :直接调起android的数字键盘，但是与ios的type...
原生input标签限制输入正、负、E
qq_39102819的博客
12-06 299
原生input标签限制输入正、负、E <input v-model="item.score" type="number" @keypress="inputScoreLimit($event)"> inputScoreLimit(e) { if (e.charCode === 43 || e.charCode === 45 || e.charCode === 101) { // 不能输入+ 、- 、e 号 e.preventDefault() }
input number解决ios兼容问题
baidu_21349635的专栏
02-27 3091
文章目录我们可以用正则表达式来限制。1.限制input输入数字只能输入正整数（包括0）2.限制input输入数字只能输入小数点最多到第三位的数字3.自己实战 保留到1位 https://segmentfault.com/a/1190000018273030 我们在做表单输入时，有时候对于有些输入比较有限制，比如输入天数必须为正整数，再比如有些特殊需求需要输入保留小数点的后面n位。那么我们如何在输...
vue input type=number输入数字后输入汉字会删除
最新发布
06-03
这是因为在`input type="number"`中，只允许输入数字和一些特殊符号，而不允许输入文字。当你在输入汉字时，浏览器会认为你输入的是非法字符，因此会自动将其删除。为了解决这个问题，你可以将`input`的`type`属性设置为"text"，然后通过正则表达式或其他方式限制输入只能为数字。例如： ```html <template> <div> <input type="text" v-model="num" @input="handleInput"> </div> </template> <script> export default { data() { return { num: '' } }, methods: { handleInput() { // 限制只能输入数字 this.num = this.num.replace(/[^\d]/g, '') } } } </script> ``` 在这个例子中，我们将`input`的`type`属性设置为"text"，然后在`handleInput`方法中使用正则表达式将非数字字符替换为空字符串，从而限制了输入只能为数字。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值