javascript - el-input type为text 输入密码替换为*号，传递后台参数如何为完整字符?

Question

el-input 的type设置为text,当输入密码时，将密码替换为星号，当反复修改输入框的值时，原来保存实际密码的值中之前部分全为星号，有尝试去通过字符串对比，去替换星号部分，但是如果只是单纯的增加，则可以通过替换补充为完整字符，如果字符串有删减，不好去找到对应位置，比如：第一次输入123456，第二次输入12u5, 含星号字符串为 星星u星 ,可以明确前两个*为12，最后一个星号不好去判断几，感觉这种对比补充的思路，需要考虑的情况有点多，请问大家有什么好的办法吗？

Answer 1

利用鼠标位置对元素进行修改替换，可参考https://blog.csdn.net/weixin_44869002/article/details/1163789...

Answer 2

显示星号为什么不直接使用type="password"呢
或者，你是需要这样的效果吗？

下午在忙，这是晚上回来后修改的

Answer 3

可以使用v-model来实现将输入的密码替换为*号，并在传递给后台之前将密码转化为完整字符。具体步骤如下：

1. 在el-input标签上添加v-model属性，将用户输入的密码绑定到data中的一个变量上，例如password。

2. 使用computed属性，将data中的password值通过replace方法替换为*号，例如：

   computed: {  maskedPassword() {    return this.password.replace(/./g, '*');  }}

   这里使用正则表达式将所有字符替换为*号。

3. 在将传递给后台的参数中使用maskedPassword属性，例如：

   <el-input type="text" v-model="password"></el-input>...// 传递给后台的参数中使用maskedPassword属性data() {  return {    password: ''  }},methods: {  sendData() {    const data = {      password: this.maskedPassword    };    // 发送数据给后台  }}

   这样，在传递给后台之前，密码会被替换为*号，并且可以保持完整字符的状态。