Add support to mask input field numbers

Created on 30 November 2023, 7 months ago
Updated 1 January 2024, 6 months ago

Problem/Motivation

Currently, we don't have support to mask input field numbers. Should be nice if have this support.

Proposed resolution

On webform calculation settings, we could add another form setting for the user to select the mask to be applied to the field calculation result.
The image below is the current element configuration, we could add mask input settings below the round result setting for example.

Remaining tasks

Investigate which mask input library should we use or even if the Webform already has some module that does and we can integrate with our module.
If we need to add library we could follow the steps below to support this feature.

  1. add the dependency library
  2. Update both custom elements FormCalculationElement, FormCalculationMarkupElement adding the library configuration needed, like export the data mask settings to the element.
  3. Update the WebformCalculationNumber and WebformCalculationMarkup webform elements adding the configuration needed to use the mask input settings.
✨ Feature request
Status

Fixed

Version

1.0

Component

User interface

Created by

πŸ‡§πŸ‡·Brazil joaopauloc.dev

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @joaopauloc.dev
  • πŸ‡§πŸ‡·Brazil Pinesso

    In accordance with the HTML specifications outlined in https://html.spec.whatwg.org/multipage/input.html#number-state-(type%3Dnumber), the sole permissible value attribute for the input type "number" is a valid floating-point number. Additionally, the field configuration encompasses the "step" option, affording users the ability to specify the granularity to which the value must adhere.

    Furthermore, the field configuration introduces the "suffix" and "prefix" options, enabling users to impart specific formatting characteristics such as currency symbols or percentages to the field.

    It is noteworthy that the imposition of a mask on the input is currently achievable by transitioning the field from type="number" to type="text." However, such a modification may engender unintended side effects on the existing implementation.

    I would recommend revising the module guidelines to provide a more comprehensive overview of the capabilities inherent in this module. This adjustment will facilitate a clearer understanding of the available features and their respective implications for users and developers alike.

    Thank you!

  • Status changed to RTBC 6 months ago
  • πŸ‡§πŸ‡·Brazil joaopauloc.dev

    Tested the new mask option and works well.
    Follow the evidence.



  • Status changed to Fixed 6 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024