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: 

1. Go to /admin/config/clear-field/settings steps

2. Enable Clear Field by selecting the checkbox 

3. Next, select the type of Button:

   1. Simple X 

   2. Fontawesome for all generic fields

4. You can then add the text and tooltip which you need to add along with icon or keep it empty if not required.

5. 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

1. Text along with X for all

Selecting the above option would add X(cross) with text beside the text field

2. 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.

| Developer support

This module is supported by 

1. Harshal Pradhan https://www.drupal.org/u/hash6

2. 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/