微信小程序-如何实现input等输入框禁止输入空格【亲测有效】

已于 2022-04-25 18:26:48 修改
阅读量7.9k 收藏 10
点赞数 5
分类专栏： 微信小程序实战 文章标签： 微信小程序 禁止空格输入
于 2020-04-09 14:23:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43970743/article/details/105405189
版权
本文介绍了如何在微信小程序中禁止input等输入框输入空格，通过正则表达式匹配并替换空格，利用数据双向绑定同步value值。同时提到了实时统计输入字数的方法和相关学习资源。
摘要由CSDN通过智能技术生成

 👨‍🎓作者：bug菌

✏️博客：CSDN、掘金等

💌公众号：猿圈奇妙屋

🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

  一、前言🔥

        发现表单提交，都是默认允许空格输入，但实际情况下，一般是不能有的，比如修改昵称、name等，有空格的输入，就显得不是那么的友好，比如吃鸡，王者等，昵称都是不允许带有空格符，所以，今个儿就来说说，微信小程序中，如何禁止空格符的输入？

其实思路很明确， 就是监控输入框，在每一次输入，替换掉输入的空格符； 

二、实现方案 🔥

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bug菌¹
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
微信小程序--组件input输入框控件的使用示例源码
03-03
微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的，比较常见的地方，如：登录、注册、搜索等。 另外输入框在不同的场景下，也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
【微信小程序-毕设期末大作业】源码电商类微信小程序
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
微信小程序: input框禁止输入空格
酷伊奥
07-19 3099
我们在input框中输入内容的时候，可能会有输入空格的情况，但是在我们的开发过程中，一般都不能有空格的，所以我们要在用户输入的过程中，将空格过滤掉，并且适应所有input的name参数的方法。代码如下： 一、wxml代码 <view> <input type="text" data-name="account" value="{{account}}" bindinput="test"/> </view> 二、wxss代码 view { width:..
微信小程序实现图片预加载组件
01-03
网页中的图片预加载 图片预加载对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 Web 页面中实现图片的预加载其实很简单，通常的做法是在 JS 中使用 Image 对象即可，代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png' 下面推荐几篇网页中实现图片预加载的
Input 输入框禁止输入空格-vue
最新发布
sun2829191346的博客
07-02 835
Input 输入框禁止输入空格—vue+element-ui
微信小程序 【数组和字符串的转换】
咕噜
01-21 6224
//法一： var userIds = that.data.userIds; var userIdsStr = userIds.join(','); //将数组转换成string串 console.log("userIds=", userIds) console.log("userIdsStr=", userIdsStr) //法二： var array= [{111},{222},{333}] //将数组对象转为字符串数组 var arr
微信小程序之接口预加载
华山派developer的博客
11-03 3404
我正在参加「掘金·启航计划」之前技术主管让我研究一下微信小程序的请求预加载的方案，但后来因为别的开发任务，预加载这款就搁置下来了。最近开发任务不重，又凑巧看了相关的文章，了解了实现原理，自己写了个轮子，大家请往下看。
微信小程序input禁止空格输入
weixin_65456815的博客
02-17 1182
【代码】微信小程序input禁止空格输入。
解决小程序input输入框只能输入英文字母，不能输入汉字
文龙刚的博客
04-24 2557
需求：最近在做小程序时，遇见了一个问题，就是我的input输入框不能输入中文，默认是英文键盘，还不能切换。（尽管我已经给定了属性 type="text"）
微信小程序---提交表单后清空输入框
03-29
最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种， 1、可以用表单的重置功能。 按钮设置：   formType="reset">提交 form设置：   bindreset="formReset"> 表单重置时会触发reset事件，在...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
input禁止输入的4种方法
前端职场小白_炜晨科技的博客
08-18 3369
input禁止输入的4种方法。
web和微信小程序input输入时禁止输入中文方法
weixin_38044564的博客
12-27 4422
前言：作为一个小白～～，每天进步一点点，每天总结一点点，生活就会美好一点～ -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式； 2.其次在input输入框操作，就需要了解input输入框的事件； 3.再看微信小程序中，那么就要知道和web是有区别的； 按照上面的3个知识，我们依次来解释～ 1.禁止输...
【2023-5-31】设置input框禁止输入
lookingForw_4585的博客
05-31 1119
input框禁止输入，非禁用
将数组中的每一项都转为字符串
温温的博客
09-12 263
我们使用map()方法遍历数组arr中的每个元素，并使用箭头函数item => String(item)将每个元素转换为字符串。最后，我们将结果存储在strArr数组中。
微信小程序-分包，分包预加载
qq_61869009的博客
09-14 2028
微信小程序分包，uiapp小程序分包操作，分包
小程序开发入门
09-21
2020年12月最新最全的零基础小程序实战入门，零基础入门微信小程序开发。10天带领大家上线一款属于自己的微信小程序。微信小程序开发入门视频教程，该课程从微信小程序注册到官方开发工具、官方Demo、再到开发个人专属小程序所有知识点，包括小程序获取用户信息等功能。
input 微信小程序 第一位不能为0_web和微信小程序input输入时禁止输入中文方法...
weixin_39867066的博客
12-19 534
前言：作为一个小白～～，每天进步一点点，每天总结一点点，生活就会美好一点～--------------------------------进入正文1.首先禁止输入中文就需要用到正则表达式；2.其次在input输入框操作，就需要了解input输入框的事件；3.再看微信小程序中，那么就要知道和web是有区别的；按照上面的3个知识，我们依次来解释～1.禁止输入中文的正则表达式为：reg = /[\u4e...
uniapp开发微信小程序如何实现uni-forms-item和uni-easyinput输入框的长度
07-14
对于 UniApp 开发微信小程序，要实现 `uni-forms-item` 和 `uni-easyinput` 输入框的长度，可以通过以下方式进行设置： 1. 使用 `style` 属性：可以在 `uni-forms-item` 或 `uni-easyinput` 组件上添加 `style` 属性来设置输入框的长度。例如： ```html <uni-forms-item> <uni-easyinput style="width: 200rpx;"></uni-easyinput> </uni-forms-item> ``` 在上述例子中，将输入框的宽度设置为 `200rpx`。 2. 使用 CSS 类名：可以通过在全局或局部的样式文件中定义 CSS 类名，然后将该类名应用到 `uni-forms-item` 或 `uni-easyinput` 组件上。例如： ```html <uni-forms-item class="custom-input"> <uni-easyinput></uni-easyinput> </uni-forms-item> ``` 然后在样式文件中添加以下内容： ```css .custom-input uni-easyinput { width: 200rpx; } ``` 以上是两种常见的方法来设置输入框的长度。你可以根据具体需求选择其中一种方式来实现。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌¹

你的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值