uniapp input type password 如何设置和使用

在uniapp中，如何设置input组件的type为password类型？使用时需要注意哪些事项？比如密码显示/隐藏的切换功能该如何实现？另外，在不同平台（如H5、小程序）上，password类型的input是否存在兼容性差异？

2 回复

在uniapp中，使用input组件设置密码输入框，只需将type属性设为"password"即可。

示例代码：

<input type="password" placeholder="请输入密码" />

这样输入的内容会显示为圆点，保护隐私。


在 UniApp 中，设置和使用 input 组件的 password 类型非常简单，主要用于输入密码等敏感信息，输入内容会被自动隐藏为圆点（•）。以下是详细说明和示例代码：

设置方法

  • 在 input 组件中，将 type 属性设置为 "password"。
  • 可选属性：
    • password：布尔值，设置为 true 时直接启用密码类型（与 type="password" 效果相同）。
    • maxlength：限制输入最大长度。
    • placeholder：设置占位符文本。

使用示例代码

<template>
  <view class="container">
    <input 
      type="password" 
      v-model="password" 
      placeholder="请输入密码" 
      maxlength="20"
      @input="onInput"
    />
    <!-- 或者使用 password 属性 -->
    <input 
      :password="true" 
      v-model="confirmPassword" 
      placeholder="确认密码" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    onInput(e) {
      console.log('输入内容:', e.detail.value); // 获取输入值
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
input {
  border: 1px solid #ccc;
  padding: 10rpx;
  margin: 10rpx 0;
  border-radius: 5rpx;
}
</style>

注意事项

  • type="password" 和 password="true" 效果相同，推荐使用 type 属性以保持代码一致性。
  • 通过 v-model 绑定数据，方便获取和设置输入内容。
  • 支持事件如 @input、@focus、@blur 等，用于处理用户交互。

这样设置后，输入框会自动隐藏输入内容，确保安全性。如果遇到问题，检查 UniApp 版本是否支持这些属性。

回到顶部