uni-app 输入框输入的18511111112莫名其妙变成了*******1112

uni-app 输入框输入的18511111112莫名其妙变成了*******1112

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：Android

手机系统版本号：Android 12

手机厂商：模拟器

手机机型：不知道

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

else if ((user.phone && user.phone !== phone) || (user.openId && !user.phone)) {
console.log("输入框手机登录：之前登录过手机新手机用户登录")
console.log(user)
console.log("用户输入的手机号" + phone)
//要把之前那个用户的isLogin改成0
let userInfo = {
id: user.id,
phone: user.phone,
openId: user.openId,
//修改的参数
isLogin: "0",
//userCode为-1后台才会更新用户
userCode: "-1"
}
sqlUtil.database[1].updateUp(userInfo, "preLogout", "id", userInfo.id).then(preU => {
let newUserInfo = {
phone: phone,
appId: __config.appId,
appType: "2",
lastLoginType: "1",
isLogin:  "1",
sessionKey:user.sessionKey
}
console.log("合并手机信息的表单信息")
console.log(newUserInfo)
sqlUtil.database[1].updateUp(newUserInfo, 'newPhoneLogin').then(up => {
//初始化一些聊天相关的信息，包括私聊消息管理器、好友关系列表
sqlUtil.database[2].init().then(ini => {
console.log("initImData初始化成功", up);
//记录登录
// that.$api.recordVisit(res.data.userInfo.userCode)
uni.reLaunch({
url: "/pages/home/index"
})
setTimeout(() => {
uni.showToast({
icon: "none",
title: "手机登录成功",
mask: true
})
}, 500)
uni.hideLoading()
return
}).catch(err => {
uni.showToast({
icon: "none",
title: "手机登录失败",
mask: true
})
uni.hideLoading()
return
})
})
})
//没有登录过，调用使用手机一键登录的参数

更多关于uni-app 输入框输入的18511111112莫名其妙变成了*******1112的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

而且我newUserInfo没那么多字段，莫名其妙多出来一些其他的字段

更多关于uni-app 输入框输入的18511111112莫名其妙变成了*******1112的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，输入框的内容被莫名其妙地替换成 *******1112，可能是由于以下几个原因导致的：

1. 输入框的 type 属性

如果你在 input 组件中设置了 type="password"，输入框的内容会被自动隐藏，显示为 *。检查你的 input 组件的 type 属性，确保它不是 password。

<input type="text" v-model="phoneNumber" />

2. 数据绑定或格式化

检查是否有在 v-model 绑定的数据上进行了格式化或处理。例如，可能在 watch 或 computed 中对输入的内容进行了处理，导致显示为 *******1112。

watch: {
  phoneNumber(newVal) {
    // 检查是否有类似的处理逻辑
    this.phoneNumber = newVal.replace(/\d{4}$/, '****$1');
  }
}

3. 第三方插件或库

如果你使用了第三方插件或库来处理输入框的内容，可能会自动对输入内容进行格式化或隐藏。检查是否有使用类似 v-mask 或 vuelidate 等插件。

4. 样式问题

检查是否有 CSS 样式对输入框的内容进行了处理，例如通过 ::before 或 ::after 伪元素添加了 *。

input::before {
  content: "*******";
}

5. 输入框的 maxlength 属性

如果你设置了 maxlength 属性，并且输入的内容超过了这个长度，可能会导致部分内容被截断或隐藏。

<input type="text" v-model="phoneNumber" maxlength="11" />

6. 输入框的 placeholder 属性

检查 placeholder 属性是否被误用，导致显示为 *******1112。

<input type="text" v-model="phoneNumber" placeholder="*******1112" />

7. 输入框的 value 属性

如果你手动设置了 value 属性，可能会导致输入框的内容被覆盖。

<input type="text" v-model="phoneNumber" value="*******1112" />

8. 输入框的 disabled 或 readonly 属性

如果输入框被设置为 disabled 或 readonly，可能会导致输入内容无法正常显示。

<input type="text" v-model="phoneNumber" disabled />

9. 输入框的 autocomplete 属性

如果 autocomplete 属性被设置为 off，可能会导致输入内容被浏览器自动填充或隐藏。

<input type="text" v-model="phoneNumber" autocomplete="off" />

10. 输入框的 input 事件

检查是否有在 input 事件中对输入内容进行了处理，导致显示为 *******1112。

<input type="text" v-model="phoneNumber" [@input](/user/input)="handleInput" />

methods: {
  handleInput(event) {
    // 检查是否有类似的处理逻辑
    this.phoneNumber = event.target.value.replace(/\d{4}$/, '****$1');
  }
}

解决方案

根据上述可能的原因，逐一检查并修复问题。如果你仍然无法找到原因，可以尝试创建一个最简单的 input 组件，逐步添加功能，直到问题复现，从而定位问题所在。

<template>
  <input type="text" v-model="phoneNumber" />
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: ''
    };
  }
};
</script>
回到顶部