How to add x at far right of textField that when pressed will delete all text

[Mark Bolduc]

If you are experiencing an issue please mention the full platform your issue applies to:
IDE: NetBeans/Eclipse/IDEA Netbeans 11
Desktop OS Windows 10 Pro
Simulator Latest

Device PC, Android, IOS

Please see attached pic (XinTextFieldDelete.JPG)

I understand I can add a simple button at end of TextField to satisfy the feature I am looking for.

Wondering if you have an alternative to this approach?

Regards

[Shai Almog]

You can use validation which does that automatically based on constraints: https://www.codenameone.com/javadoc/

It can also adapt based on input styles/OS see: https://www.codenameone.com/blog/pixel-perfect-text-input-part-2.html

[Mark Bolduc]

Is the function of the red x to clear the text in the field?

If so it does not work (at lease on PC and IOS)

I want a simple ability to clear a field with a touch of the red x at right side of field VS having to tap the x in the keyboard for every character.

Thoughts?

Regards

[Shai Almog]

Sorry I looked at the screenshot and didn't properly read the title. That's a validation X.

If you're using TextComponet in the onTop mode you can use action() with a material font icon to clear the text and actionClick() to invoke setText("").

You can implement it otherwise by using something like this:

TextField field = ...;
Border b = field.getUnselectedStyle().getBorder();
field.getAllStyles().setBorder(null);
Button clearButton.= ...;
clearButton.addActionListener(e -> {
    field.stopEditing();
    field.setText("");
});
Container clearable = BorderLayout.centerEastWest(field, clearButton, null);
clearable.getUnselectedStyle().setBorder(b);

Notice I could have used a layered layout to place the button on top but I find this approach to be more reliable.