快應用如何實現密碼明文和密文切換顯示

   很多應用提供了賬號登入、註冊功能，在輸入密碼時，開發者為了安全性，當使用者輸入密碼時，一般都顯示 …… 的密文。但是，這個體驗也給使用者造成了不便，使用者不知道當前輸入的字元是否是自己期望的，也無法知道當前輸入到哪個字元。針對這個問題，開發者進行了最佳化，在輸入框旁邊提供了小圖示，點選可切換顯示明文和密文。快應用開發也是可以實現上述功能的。

解決方案

1. 密碼輸入框使用input 元件，input 元件提供了多種type 值，密文使用type 型別為 password，明文型別可使用text型別，type欄位需要繫結動態變數。

2. 在明文和密文切換時，需要顯示設定游標位置在末尾，要不切換後游標會顯示在開始位置。設定游標位置可以透過 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/consumer/cn/doc/development/quickApp-References/quickapp-component-input#h1-1575544278909

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0201460277979560908?fid=0101271690375130218

原作者：Mayism