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

Hello Mike,

I answered your question in the thread Character typing.

Best regards

Paul Banach

---

Hi Paul,

I have implemented the password approach using text editor. If I have input a password as "Admin^1", the variable content is updated as "Admin^1" but in the text editor it is showing as "********". i.e one extra ' * '. Is there anyway to omit that extra ' * ' within the text editor view.? Because passwords have character limitation. so adding extra ' * ' for those special characters will confuse users.

Regards,

Sazna.

---

Hello Sazna,

please add following steps to the above described steps 1..10:

Step 11: Open the method onCharacterKey and remove following code lines:

// Precede all special control signs with the '%' escape sign. Otherwise
// the user can't input nor see them
if (( ch == '^' ) || ( ch == '~' ) || ( ch == '\xAD' ) || ( ch == '%' ))
  str = "%" + ch;

 Step 12: Open the method OnSetString and remove following code lines:

var int32  inx = str.find( '%', 0 );

// The special '%' escape sign is not visible until there is other
// '%' sign in front of it. Convert all '%' signs into '%%' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '%', inx + 2 );
}

inx = str.find( '^', 0 );

// The special '^' control sign is not visible until there is a '%'
// sign in front of it. Convert all '^' signs into '%^' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '^', inx + 2 );
}

inx = str.find( '~', 0 );

// The special '~' control sign is not visible until there is a '%'
// sign in front of it. Convert all '~' signs into '%~' sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '~', inx + 2 );
}

inx = str.find( '\xAD', 0 );

// The special '\xAD' hyphen sign is not visible until there is a '%'
// sign in front of it. Convert all '\xAD' hyphen signs into '%\xAD'
// sequences
while ( inx >= 0 )
{
  str = str.insert( "%", inx );
  inx = str.find( '\xAD', inx + 2 );
}

 Step 13: Open the method OnGetString and remove following code lines:

// In the following steps remove any special text view control signs
// which are usually used to control the text flow. The resulting string
// should contain the 'pure' text only.
var int32 inx = str.find( '%', 0 );

// The special control/escape signs are not visible until there is a
// '%' sign in front of them. Remove all superfluous '%' signs
while ( inx >= 0 )
{
  str = str.remove( inx, 1 );
  inx = str.find( '%', inx + 1 );
}

 Step 14: Open the method onDeleteKey and remove following code lines:

// The sign was a special control sign? In this case the sign comes
// together with the preceding '%' escape sign - otherwise the user
// couldn't see the sign
if ( ch == '%' )
  count = 2;

  Step 15: Open the method onBackspaceKey and remove following code lines:

// The sign was a special control sign? In this case the sign comes
// together with the preceding '%' escape sign - otherwise the user
// couldn't see the sign
if (( ch == '^' ) || ( ch == '~' ) || ( ch == '%' ))
  count = 2;

The above code sections exist to handle the characters ^ ~ and % which are handled exceptionally by the Text view. However, in your application the Text view will display only * characters. The special handling is not necessary and interfering with the steps 1..10.

I hope it provides the desired behavior.

Best regards

Paul Banach

---

Hi Paul,

I have adapted above changes but we have a toggle button to view the actually typed password. i.e content. when we try to view the content it comes with a empty space.

For Example:

input: Admin^1

Text.String = *******

content = Admin 1

How to achieve both scenarios correctly?

Regards,

Sazna.

---

Hi Paul,

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

Regards,

Sazna.