微信小程序: input框禁止输入空格

最新推荐文章于 2025-10-22 15:56:35 发布

原创最新推荐文章于 2025-10-22 15:56:35 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在WXML和JS中通过bindinput事件及正则表达式，实现在微信小程序中过滤input框的空格输入。适合开发者提升用户体验和代码规范。

我们在input框中输入内容的时候，可能会有输入空格的情况，但是在我们的开发过程中，一般都不能有空格的，所以我们要在用户输入的过程中，将空格过滤掉，并且适应所有input的name参数的方法。代码如下：

一、wxml代码

<view>
  <input type="text" data-name="account" value="{{account}}" bindinput="account"/>
</view>

二、wxss代码

view {
  width: 100vw;
  height: 100rpx;
  display: flex;
  justify-content: center;
}
view input {
  width: 80vw;
  height: 80rpx;
  border: 1rpx solid black;
  border-radius: 8rpx;
}

三、js代码

Page({
  account(e){
    console.log(e);
    let name = e.currentTarget.dataset.name
    this.setData({
      [name]: e.detail.value.replace(/\s+/g, '')  // 或者用trim(可以过滤掉两边的空格)
    })
  },
})

四、实现此功能的思路

1、给input框绑定bindinput输入事件

2、使用双向绑定同步获取当前输入框的value值

3、使用data-name方法获取input的name

4、在js中使用正则表达式将输入框中的空格过滤掉