[Input Masks Mobile] Input Mask Numeric - Force Numeric keyboard

[Input Masks Mobile] Input Mask Numeric - Force Numeric keyboard

  
Forge Component
(7)
Published on 2017-11-15 by Labs
7 votes
Published on 2017-11-15 by Labs

Hi,

We are using your plugin in a mobile application, Platform version 10, but we are facing one challenge regarding the use of numeric keyboard, when we have a numeric input assign to a integer variavel in mobile devices, we can't force the use of numeric keyboard (android). 

Is it possible to include this feature, to force the use of numeric keyboard, or can you tell us how to do it?

Thanks in advance,

Tiago Cardoso

 

Hi,

On the text box extended properties add a property type with the value "number".

Best Regards,

Marcelo

Hi Marcelo,

I tried your indication, but does not work.

I think it do the same of the "Input Type" property on the native component Input.

Thanks

Tiago Cardoso

Hello Tiago,

You are right. Currently the component is not showing the correct keyboard.

We will take a closer look into it and we will publish a new version with that fix as soon as possible.

Thanks,

Samuel Jesus

Hi Tiago,

In the meantime you could do like this:

  1. Add an OnReady action to your screen
  2. Add a Javascript statement to that action
  3. Add this to the javascript:
document.getElementById("Input_Number").setAttribute("type", "number");

where Input_Number is the Name of your Input widget (inside the InputMask)

This procedure will modify the type of the input to be a number after the DOM is ready.

Cheers,

José

Hello,

José suggestion is a valid one, but due to the component architecture, if you use one of the input masks on your input, that property would be overridden.

But don't worry: we have just released a new version (1.0.3) on Forge, with that specific fix. Just use the mask without any properties on your input.

Please let us know if it solved your issue.

Cheers,

Samuel Jesus

Hi,

With your fix is possible to have comma as decimal separation? Because the type number has a problem with it.

Regards,

Marcelo

Hello Marcelo,

Yes, our fix is compatible with a comma as a decimal separator. 

The reason why it works is that we already put the decimal separator for you. 

Not only that but we also don't use the type Number. Instead, we use the type tel. You can read more on that on this article about input masks.

Cheers,

Samuel Jesus

Hi Samuel,


I allready tried the new release. It works fine on show the numeric pad.

However, i can't triger any of the javascript events (OnBlur, OnTouchEnd, OnTouchstart.....) on my input. The only event it triger properlly is the Native OnChange.

There is any reason for that?


Thanks

Tiago Cardoso

Hello Tiago,


You are not able to trigger the javascript events due to the architecture of the component.

The input you actually see and are able to interact is not your input: the reason for that is to keep your variable with an unmasked value, while showing you the masked value.


So, to have the behaviour you're looking for, you need to apply the events to a different input.

To do this, please use the following step by step walkthrough:

  • On your screen, wrap the input mask block with a container and give that container a Name

  • Create a new variable (type Object) for each event handler you'll need. 
    • In this example, we added 3 variables: OnBlurHandler, OnTouchStartHandler, OnTouchEndHandler

 

  • On your screen, make sure you have an action for the On Ready Screen Event

  • On that action, create a Javascript Node:
    • Add an Input Parameter called ContainerId - this will receive the Id of the container created on the first step
    • Add an Output Parameter for each event handler. These variables will be used later on to destroy the event handlers, when you switch screens
    • Paste the following code and adapt it as needed for your use case. In this example, we prepared for 3 events: OnBlur, OnTouchStart, OnTouchEnd

var maskedInput = document.querySelector('#' + $parameters.ContainerId + ' .inputmasksmobile .masked-value');

$parameters.OnBlurHandler = function(evt) {
   // OnBlur event handler
};

$parameters.OnTouchStartHandler = function(evt) {
   // OnTouchStart event handler
};

$parameters.OnTouchEndHandler = function(evt) {
    // OnTouchEnd event handler
};

maskedInput.addEventListener('blur', $parameters.OnBlurHandler);
maskedInput.addEventListener('touchstart', $parameters.OnTouchStartHandler);
maskedInput.addEventListener('touchend', $parameters.OnTouchEndHandler);



  • Assign your container Id to the input parameter.

  • Assign each output variable to the respective local variables


  • On your screen, make sure you have an action for the On Destroy Screen Event

  • On that action, create a Javascript node:
    • Add an Input Parameter called ContainerId
    • Add an Input Parameter for each event handler.
    • Paste the following code, and adapt it as needed for your use case. In this example, we are removing the 3 previously added event listeners.

var maskedInput = document.querySelector('#' + $parameters.ContainerId + ' .inputmasksmobile .masked-value');

maskedInput.removeEventListener('blur', $parameters.OnBlurHandler);
maskedInput.removeEventListener('touchstart', $parameters.OnTouchStartHandler);
maskedInput.removeEventListener('touchend', $parameters.OnTouchEndHandler);



And that's it. I know, this workaround is a bit extense and even advanced. However, its the best way to give you the functionality without changing the component directly.

Cheers,

Samuel Jesus

Hello Samuel

After we analise your soluction we think it is a litle complex when you have multiple inputs in one page. 


So, we talk with some Android experts they tell us that Android just work with text and the best soluction is made our input type text and force the Numeric keyboard (like your soluction to show the phone pad).

That was the soluction we have applyed.

Thanks for the help

Tiago Cardoso