Many applications provide account login and registration functions. In order to ensure security, when a user enters a password, the developer usually displays… The cipher text. However, this experience also causes inconvenience for the user, who does not know whether the character currently typed is what he expects or which character is currently typed. To address this problem, the developers have optimized the input box by providing a small icon that can be clicked to switch between displaying plain text and ciphertext. Fast application development can also achieve the above functions.

The solution

  1. The password input box uses the input component. The input component provides multiple types of type values. The ciphertext type is Password, the plaintext type is text, and the type field must be bound with dynamic variables.

  2. When switching between plain text and ciphertext, you need to set the cursor position at the end; otherwise, the cursor is displayed at the beginning. The cursor position can be set using the setSelectionRange() method, where the start and end arguments are set to the length of the text currently entered.

Example code is as follows:

<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>Copy the code

The above code realizes a simple password plaintext and ciphertext switching display function, click the lock icon on the right, you can switch display plaintext and ciphertext. The effect is shown below:

Figure 1 Password displayed in plain text

Figure 2 Password ciphertext display

For more details, see:

Quick application Input component development guide:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism