G Web Development Software

cancel
Showing results for 
Search instead for 
Did you mean: 

number pad on the mobile

Solved!
Go to solution

I looked through Googling, there is 'html input mode', but it is not possible to apply it as shown in the screen shot below.

 

<input type="number" pattern=”\d*”>
<input inputmode="numeric" />
<input inputmode="decimal" />

 

yuje_0-1670161312814.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

yuje_1-1670161312738.jpeg

 

yuje_2-1670161312684.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Is there any way?

0 Kudos
Message 1 of 5
(1,883 Views)
Solution
Accepted by yuje

First off, typical caveats: modifying G Web output with custom JS is not supported and this technique may break if updating G Web in the future. If it breaks in the future you'd need to update the code to accommodate for likely undocumented changes to the DOM hierarchy and G Web functionality.

 

Now, to the solution! I was able to get this to work by adding the inputmode="numeric" attribute to the input element within the control. Note that G Web's components are nested hierarchies and I first created the page, looked at the DOM hierarchy, and found the proper place to apply the attribute.

numeric element.png

 

I then implemented a simple JSLI to be able to drop a subVI call on any WebVI to apply this attribute to all numerics:

numeric jsli.png

 

Et voila:

numeric.png

 

I've attached the small example which includes the following JS leveraged with the JSLI:

(function() {
const setNumericMode = function () {
var numerics = document.querySelectorAll("jqx-numeric-text-box input");

numerics.forEach(element => element.setAttribute("inputmode", "numeric"));
};

window.GWebUtils = {
setNumericMode
};
}()); 

 

Message 2 of 5
(1,833 Views)

Jesus, 

 

I didn't expect you to provide such a detailed solution in less than a day.

 

really appreciate it 😘

0 Kudos
Message 3 of 5
(1,812 Views)
    numerics.forEach(element => element.setAttribute("inputmode", "numeric"));

 ->

    numerics.forEach(element => element.setAttribute("inputmode", "decimal"));

 

 

I have confirmed that this is really easy to apply.
Also changed it to "decimal" as above because decimal input in iOS.

0 Kudos
Message 4 of 5
(1,801 Views)

I knew HOW to do it, just had to work out some specifics. And hopefully search functionality works well and this question doesn't have to be answered again now!

0 Kudos
Message 5 of 5
(1,777 Views)