While trying to build a form, I found that it would be useful to have a one-click/touch option to clear text field values instead of selecting all the text and removing it. Even though this appears like a small issue, solving this would make users life easy! This was the driving force behind creating the Clear Field Values module for Drupal 8. The Clear Field Values module provides a way to clear data in the text field values with a single click/touch.
| Clear Field Values module
This module adds a button to clear text field values in one click/touch and provides two options at present, one is a simple cross button and the other is using font awesome icons.
| Benefits
- Helps clear the entire input field without having to delete the whole text manually
- Clears a pre-suggested input present in the input field, that the user does not require.
| Implementing the Clear Field Values module
Follow these steps to configure the Clear Field:
- Go to /admin/config/clear-field/settings steps
- Enable Clear Field by selecting the checkbox
- Next, select the type of Button:
- Simple X
- Fontawesome for all generic fields
- You can then add the text and tooltip which you need to add along with icon or keep it empty if not required.
- Add classes for the text field elements where you need the cross button to be visible.
Step 1 : Move to Settings page /admin/config/clear-field/settings
Step 2: Enable Clear Field Checkbox
Select Type of Button
- Text along with X for all
Selecting the above option would add X(cross) with text beside the text field
- Font Awesome for all fields generic
Enable FontAwesome module https://www.drupal.org/project/fontawesome and you can add the cross button
Default values for the text of the icon and tooltip are Clear Field & Clear field value which can be overridden.
Default values for the Classes are form-text form-email separated by a space.
For a custom-form add custom classes defined under element’s attributes under Classes field.
https://youtu.be/1czrz9RcCs8
| Developer support
This module is supported by
- Harshal Pradhan https://www.drupal.org/u/hash6
- Kiran Kadam https://www.drupal.org/u/kirankadam911
| Module download links
https://www.drupal.org/project/clear_field
https://www.drupal.org/project/clear_field/releases/8.x-1.x-dev
Do send in your feedback around this module! We would love to hear from you.
Reference: https://www.geeksforgeeks.org/html-clearing-the-input-field/