Text editor information

Question

Hi  

I am new developer,

I started with text editor component template

so I am able to get the string from the text editor .

Question: I want to mask that typing and instead print # on every character type

Can you please advice me the steps

Answer 1

Hello Mike,

I suppose, your application is the password input. If this is the case, I would not use the Text Editor component. It implements a lot of functionality, which is useless when the text is not visible. For example, the navigation in the text and the automatic line wrap will possibly irritate the user when the text is not visible.

Instead I would:

1. implement a simple GUI component with Text view and the Key Handler inside it.

2. Configure the Key Handler to react to alphanummeric keys (the setting AlphaOrDigitKeys).

3. Connect a new Slot method to the handler's OnPress property.

4. Add a new variable to the component where the entered string will be stored. Configure the variable with type string.

5. Implement the slot method (from step 3) with following or similar code:

// Collect the just pressed key code in the variable
Variable = Variable + KeyHandler.CharCode;

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

6. If you additionally want the user to be able to delete the last entered character you can add a further Key Handler to the component.

7. Configure the handler to react to the Backspace key.

8. Connect a new Slot method to the handler's OnPress property.

9. Implement the method (from step 8) as shown below:

// Truncate the string
Variable = Variable.left( Variable.length - 1 );

// Display '#' sign in the Text view.
Text.String = string( '#', Variable.length );

10. When the user finalized the input operation, the entered string (Password?) is found in the variable.

Is this the right approach for your application case?

Best regards

Paul Banach

 

Comments

Hi Paul,

Achieved the required implementation without removing the above mentioned steps.  Thank you for the assistance.

Regards,

Sazna.

---

Hi,

I added two text editors for username and password. After adopting the above changes, both my username and password contents are masked by the default character. So, how can I distinguish between username and password text editors.

---

Add a second Text Editor component to your project. For password use only the Editor component modified to hide the signs. For all other text inputs use the other component.

---

Hi Paul,

After adapting the changes  for onCharacterKey, OnSetString, OnGetString, onDeleteKey, onBackspaceKey, How the onPressTouch function can be modified?, since there is a toggle button to view the actual text, when pressing the text editor while having masked(***) version of password  with special characters like %,^,and ~, the caret is misplaced when try to view the actual entered text.

Regards,

Sazna.

---

Hello Sazna,

with special characters like %,^,and ~, the caret is misplaced when try to view the actual entered text.

When following the steps above, I don't observe any issues with the touch functionality. Can you please review your implementation again?

Best regards

Paul Banach