微信小程序input只允许输入数字

最新推荐文章于 2024-04-19 16:54:33 发布

原创最新推荐文章于 2024-04-19 16:54:33 发布 · 5.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何在微信小程序中设置input组件，只允许用户输入数字。通过wxml和js的相关配置，实现输入框只能接受数字的限制。

微信小程序input只允许输入数字

1、wxml

 <!-- start 联系电话 -->
    <view class="mobile">
      <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number"
        bindblur="mobileInput" maxlength="11" placeholder="请输入电话号码！" />
    </view>
    <!-- end 联系电话 -->

2、js

  // 电话输入
  mobileInput(e) {
    let value = e.detail.value.replace(/\D/g, '')
    this.setData({
      mobile: value
    })
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

左眼皮一直跳

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 input 输入校验

skysys的研究小屋

03-27

5527

Demo: <view class="form-item"> 重量(kg) <input class="input" bindinput='bindinputWeight' type='number' maxlength='4' value="{{register.weight}}" placeholder-class="phcolor" placeho...

微信小程序表单验证（手机号、邮箱验证、输入非空）

sunsineq的专栏

05-09

2328

Page({ /** * 页面的初始数据 */ data: { indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, proList: null, name:"", phone:"", email:"", company:"", job:"", vip:"" }, // 判定输入为非空字符 formSubmit: function (e) { .

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

weixin_44869206 2020.11.20
不起作用啊
- 张丽丽同学回复weixin_44869206 2022.05.20
  因为设置type="number"在真机上运行就只会调起数字键盘

微信小程序input输入框校验手机号输入错误

qq_46199553的博客

09-07

2686

input输入框错误提示

微信小程序电话号码input框的正则校验

improvement

11-13

4684

微信小程序电话号码input框的正则校验 1、wxml  <view class="mobile"> <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number" bindblur="mobileInput" maxleng

微信小程序 - 设置input只能输入数字

热门推荐

CSU_Zipple的博客

03-15

3万+

需求 view如下： <view class="ys-number-input {{error?'error':''}}"> <input type="number" auto-focus focus='{{focus}}' value="{{value}}" title="" bindinput="handleInput" bindblur="va

微信小程序 input输入框详解及简单实例

08-31

在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...

微信小程序：input用正则限制输入但是失效

CY_WINT的博客

01-11

1342

加一个$nextTick()函数进行实时监听修改，就解决了，或者使用setTimeOut函数重复调用赋值应该也ok。问题：正则匹配修改，但是仍然失效，通过打印数值发现已经修改成功，所以问题出在没有实时修改上。效果：想要实现输入框只能输入数字，第一位不能是点，小数点后只有两位数字等等。最后贴上正则处理函数。

微信小程序 input 不能输入特殊字符的方法

joe0235的博客

04-19

1220

微信小程序开发中经常遇到有表单提交的需求，一些特殊的字段要过滤掉特殊字符。比如姓名、籍贯、地址等，都要实现不能输入特殊字符的功能，可以创建一个统一的方法来处理输入事件，并在这个方法中检查输入的字符。请注意，这个示例在输入非符合正则表达式时会清空输入框，这可能会影响到部分用户的体验感。

微信小程序 input输入框控件详解及实例（多种示例）

08-31

在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...

精选资源

carnumber_input_微信小程序_车牌_

10-04

在IT行业中，微信小程序是一种轻量级的应用开发平台，它允许开发者快速构建可以在微信内运行的应用程序，无需安装即可使用，极大地提升了用户体验。本项目"carnumber_input_微信小程序_车牌_"聚焦于创建一个特定的...

微信小程序只能输入数字和字母

feelinghappy的专栏

04-29

6723

微信小程序的input组件中有个bindinput属性，用来实时检测输入的内容，只需要在返回的时候，使用正则表达式处理输入的内容，然后返回到输入框。 <input type='text' bindinput="inputCode" placeholder='请输入密码' password="true"></input> 1.只能输入英文 inputCode: function(e) { let pwd = e.detail.value return pw

微信小程序中的正则验证、手机号验证随笔

丑八怪的博客

03-12

3094

微信小程序中的正则验证、手机号验证随笔 ###需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题 微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法 $("body").on("blur", ".input", function () { console.log($(.input).val()) }) 思路: 在input onblur的..

input框配置只能输入数字

m0_71130954的博客

03-20

1535

input限制数字输入

微信小程序 设置input只能输入数字 text-文本输入键盘 number-数字输入键盘 idcard-身份证输入键盘 digit-带小数点的数字键盘

夜阑珊妖妖

05-31

8546

type 的合法值 text - 文本输入键盘 number - 数字输入键盘 idcard - 身份证输入键盘 digit - 带小数点的数字键盘 confirm-type 设置键盘右下角按钮的文字，仅在type='text’时生效 send - 右下角按钮为“发送” search - 右下角按钮为“搜索” next - 右下角按钮为“下一个” go - 右下角按钮为“前往” done - 右下角按钮为“完成” 其他相关文章： 微信小程序 - 设置input只能输入数字:https:/

微信小程序原生组件封装之input校验

zz_prayer的博客

06-14

1345

文本输入框功能：可以选择输入手机号码或者验证码（其余功能需要根据场景自己开发），同时对输入的内容进行校验可以自定义校验失败的文案提示以及样式的修改在失去焦点以及当前类型的最大长度的时候会开启校验，校验不通过鬼进行文案提示手动删除文本框中的内容的时候，当长度为0时，默认关闭该校验 <zf-input label="" // 标题 ---- 如果不传，默认不展示 type="text" // 输入的文本的类型，默认为text ,可选择的类型为： text(文本输入键盘) number(数字输

小程序js（正则表达式）：文本框对手机号进行标准化规范

weixin_46001736的博客

10-09

3295

小程序js（正则表达式）：文本框对手机号进行标准化规范

微信小程序 input 只能输入小数，小数点以及加减号

tangzhengdz的博客

01-24

8071

最近做小程序开发，需求是input输入框只能输入小数，小数点以及加减号 小程序官方文档 input 软件盘有四种模式。但都不能满足需求。最后只能在 type =‘text’的基础上通过正则判断并删除不合法的输入内容。直接上代码 var replaceArray = []; for (let i = 0; i < value.length; ++i) {//正则判断是...

小程序输入框只能输入数字并设置位数

weixin_43167662的博客

05-05

1228

type="number"maxlength="10" <inputclass="weui-cell__bd-1"bindinput="bindinputWeight"type="number"maxlength="10"placeholder="请输入换货单号"/>

微信小程序input框输入值校验

ShawnWang22的博客

08-29

2245

微信小程序input框输入值校验

微信小程序input控制时输入数字和字母

最新发布

08-14

在微信小程序中，如果需要实现输入框只能输入数字和字母的效果，由于微信小程序的 `input` 组件在 `type` 属性上不完全支持某些输入类型限制（如仅允许英文字母和数字），因此需要通过额外的逻辑来实现这一功能。 ### 输入框限制实现方法 1. **使用 `type="text"` 并结合正则表达式进行过滤** 由于 `type="number"` 在微信开发者工具中无法完全限制输入，因此可以将 `type` 设置为 `"text"`，并在输入事件中使用正则表达式对输入内容进行过滤。例如，可以使用正则表达式 `/[^a-zA-Z0-9]/g` 来移除非字母和数字的字符： ```javascript inputCode: function(e) { let value = e.detail.value; let filteredValue = value.replace(/[^a-zA-Z0-9]/g, ''); return filteredValue; } ``` 2. **在 WXML 中绑定输入事件并更新输入框的值** 在页面的 WXML 文件中，可以通过 `bindinput` 事件来调用上述方法，并将处理后的值绑定到数据模型中： ```xml <input type="text" bindinput="inputCode" value="{{inputValue}}" /> ``` 3. **在页面的 JS 文件中定义数据模型和方法** 在页面的 JS 文件中，需要定义 `inputValue` 数据属性以及 `inputCode` 方法，以实现对输入内容的实时过滤： ```javascript Page({ data: { inputValue: '' }, inputCode: function(e) { let value = e.detail.value; let filteredValue = value.replace(/[^a-zA-Z0-9]/g, ''); this.setData({ inputValue: filteredValue }); } }); ``` 4. **使用 `keyboard` 属性控制键盘类型（可选）** 如果希望用户在输入时默认弹出特定类型的键盘（如数字键盘），可以结合 `type="number"` 或 `type="digit"` 来实现。然而，由于微信小程序的限制，这种方式并不能完全阻止用户输入非数字字符，因此仍需配合正则表达式进行内容过滤。 ### 注意事项 - **真机调试**：由于微信开发者工具在某些功能上与真机表现存在差异，因此建议在真机上进行最终测试，以确保输入限制逻辑正常工作。 - **兼容性**：如果应用需要支持多个平台（如 H5、App），可以使用 `uni-app` 提供的条件编译功能，为不同平台编写特定的输入处理逻辑。 - **用户体验**：在限制输入时，应考虑用户输入体验，避免因频繁的输入拦截导致用户操作不便。