关于appgallery-connect:快应用如何实现密码明文和密文切换显示

很多利用提供了账号登录、注册性能，在输出明码时，开发者为了安全性，当用户输出明码时，个别都显示……的密文。然而，这个体验也给用户造成了不便，用户不晓得以后输出的字符是否是本人冀望的，也无奈晓得以后输出到哪个字符。针对这个问题，开发者进行了优化，在输入框旁边提供了小图标，点击可切换显示明文和密文。快利用开发也是能够实现上述性能的。

解决方案
明码输入框应用 input 组件，input 组件提供了多种 type 值，密文应用 type 类型为 password，明文类型可应用 text 类型，type 字段须要绑定动静变量。

在明文和密文切换时，须要显示设置光标地位在开端，要不切换后光标会显示在开始地位。设置光标地位能够通过 setSelectionRange()办法，办法中的 start 和 end 参数都设置成以后输出的文字长度。

示例代码如下：

<template>
  <div class="container">
    <stack class="input-item"> 
      <input class="input-text" type="{{inputtype}}" id="inputpsdID" placeholder="please enter password" onchange="showChangePrompt"></input>
      <image src="../Common/lock.png"  class="lock" onclick="switchpassandshow"></image>
    </stack>
  </div>
</template>
 
<style>
  .container {
    flex: 1;
    padding: 20px;
    flex-direction: column;
    align-items: center;
  }
 
  .input-item {
    margin-bottom: 80px;
    margin-top: 10px;
    margin-left: 16px;
    margin-right: 16px;
     align-items: center;
     justify-content: flex-end; 
  }
 
  .lock{
     width: 40px;
     height:40px;   
  }
 
  .input-text {
    height: 80px;
    width: 100%;
    line-height: 80px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: #999999;
    font-size: 30px;
    background-color: #ffffff;
    padding-right: 42px;
  }
 
  .input-text:focus {border-color: #f76160;}
</style>
 
<script>
  export default {
    data: {
      inputtype: 'password',
      lenth: 0
    },
    onInit() {this.$page.setTitleBar({ text: 'Switching between plaintext and ciphertext'});
    },
 
    showChangePrompt(e) {
      this.lenth = e.value.length;
      console.info("showChangePrompt   this.lenth=" + this.lenth);
 
    },
 
    switchpassandshow: function () {var com = this.$element('inputpsdID');
      if (this.inputtype === 'password') {this.inputtype = 'text';} else {this.inputtype = 'password';}
       com.setSelectionRange({start: this.lenth, end: this.lenth});
    }
  }
</script>

上述代码实现了一个繁难的明码明文和密文切换显示性能，点击左边的锁图标，能够切换显示明文和密文。成果如下图所示：

图 1 明码明文显示

图 2 明码密文显示

欲了解更多详情，请参见：

快利用 input 组件开发领导：

https://developer.huawei.com/…

原文链接：https://developer.huawei.com/…
原作者：Mayism