uniapp小程序如何实现type='text’的输入框的值显示未*号,但是拿一个值存储为真实的值,不能设置type=password,要用uniapp小程序
时间: 2024-09-27 14:07:18 浏览: 42
在UniApp小程序中,如果你想实现一个文本框`<input type="text" />`显示星号(*)但实际存储密码时保持原始值,可以使用`placeholder`属性显示星号,并通过`bindinput`事件处理程序来获取用户输入的真实字符。由于Uniaapp不允许直接设置`type="password"`,我们可以采用一种间接的方式来模拟密码输入的效果。
首先,在`<view>`标签内创建一个输入框:
```html
<input placeholder="**" bindinput="handleInput" />
```
然后在对应的JS文件中添加`handleInput`函数:
```javascript
Page({
data: {
password: '', // 存储真实密码
inputText: '' // 显示给用户的星号字符串
},
handleInput(e) {
this.setData({
inputText: '*' * e.detail.value.length,
password: e.detail.value // 保存实际输入的密码,隐藏真实字符
});
}
})
```
现在,当你在输入框中输入内容时,它会显示星号,但`data.password`字段将记录实际的密码。这种做法适用于需要展示密码部分模糊化的场景,但实际数据安全仍然依赖于服务器端的安全措施。
阅读全文