如何为EditText填充密码隐藏字符，点击后自动清空预设内容

实现思路 #

预先给EditText填充伪装的圆点字符串作为默认内容，新增标记位判断初始伪装是否已清除，监听输入框获取焦点、密码可见切换按钮点击两个事件，触发时清空初始伪装内容，再走正常的输入/密码切换逻辑。 #

步骤1：基础布局配置 #

布局中增加EditText和密码切换的眼睛图标即可，示例如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <EditText
        android:id="@+id/et_password"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
    <ImageView
        android:id="@+id/iv_toggle_pwd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_eye_close" />
</LinearLayout>

步骤2：核心逻辑实现 #

全局变量定义 #

• isFakeDotCleared：标记初始伪装圆点是否已被清除，避免重复清空用户已输入的内容
• fakeDotText：预设的初始伪装圆点，可自定义长度

private var isFakeDotCleared = false
private val fakeDotText = "••••••••" // 示例为8位圆点，可自行调整长度

初始化配置 #

页面初始化时给EditText填充伪装圆点：

et_password.setText(fakeDotText)

监听输入框焦点事件 #

输入框被点击获取焦点时，若未清空过初始伪装则清空内容：

et_password.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
    if (hasFocus && !isFakeDotCleared) {
        et_password.text.clear()
        isFakeDotCleared = true
    }
}

监听密码切换图标点击事件 #

点击切换密码可见性时，优先判断是否需要清空初始伪装，再走正常的切换逻辑：

iv_toggle_pwd.setOnClickListener {
    // 先判断是否需要清空初始伪装
    if (!isFakeDotCleared) {
        et_password.text.clear()
        isFakeDotCleared = true
    }
    // 正常切换密码可见性逻辑
    val inputType = et_password.inputType
    if (inputType == (InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD)) {
        // 切换为可见
        et_password.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
        iv_toggle_pwd.setImageResource(R.drawable.ic_eye_open)
    } else {
        // 切换为隐藏
        et_password.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
        iv_toggle_pwd.setImageResource(R.drawable.ic_eye_close)
    }
    // 光标移到文本末尾
    et_password.setSelection(et_password.text.length)
}

注意事项 #

• 若需要重置表单恢复初始伪装圆点，只需将isFakeDotCleared重新设为false，再给EditText重新设置fakeDotText即可
• 圆点长度可根据业务需求自行调整，不会影响后续用户输入的内容

内容的提问来源于stack exchange，提问作者Benazir Sh