Help with visual/onscreen numpad

Wappler General How To
#1

I have an input set to type “number” that works fine but I also wanted users to be able to pull up a visual/onscreen numpad they could use to enter in a number by clicking the numbers rather than typing it on their keyboard. I want the visual numpad to enter the number into the input so it can be submitted in the same way regardless of it is typed out or enter via the visual one.

So, I made a numbpad on an off-canvas component and added buttons and put an on-click event that adds the clicked number to the input like this

(inp_number.value + “1”) and (inp_number.value + “2”) and so on. I believe the " " is necessary because otherwise it will act as a number and make 1+1=2 rather than 11 but would like some conformation this is the correct way to do it.

My issue is with getting the . to work. When I tried (inp_number.value + “.”) it seems to break the input, it sets it to the placeholder value and won’t let me enter in any numbers.

My other issue is that I’m not sure how I can get a backspace button to work. Essentially, I just want to delete the last character from the input ie 123 -> 12 but I don’t know how to go about doing that.

Has anyone else done anything like this or have any ideas on how to make this work?

#2

Hi,

Yes, you’re right.

The first question you should research, does a HTML form input of type number accepts decimal numbers?

“123” -> “12”

It’s a substring with length of the original one minus one. Is there a Wappler formatter that allows you to copy a string or make a substring?

#3

For the decimal if I type it on my keyboard it works fine, its only when doing it via a button with (inp_number.value + “.”) that breaks it.

And thanks for the info on how to do the backspace, got that working.

Edit - Tried the decimal again and now it seems like when I put it in it breaks it but then when I add another number it fixes it. Like if I put in 150 its fine and then if I add the decimal it shows the placeholder 0.00 but then if I add a 1 it will work and show 150.1

Could it something like 150 and 150.1 are valid numbers but 150. isn’t? Would it need to be 150.0? But if I type it in myself it shows up if I type 150. so I’m not sure.

#4

I don’t particularly know the answer to this question, but it seems you’re on the road towards solving the problem :slight_smile:

As for the input number type, decimal numbers are only allowed if you change the step attribute I think (the “research” I mentioned)

#5

I tried adding step=".01" and it’s still the same problem.

If I use my physical keyboard to type into the input, I can type in 1 or 1. or 1.1 and it will show up fine.

If I use the on-screen keyboard to enter a number into the input via a dynamic event, I can put in 1 fine but if I put 1. it will only show the placeholder but if I add another 1 after it will show 1.1 fine.

Any ideas?

Quick recording showing what I mean
77Q7GJa

#6

Anyone have any ideas on how to get this to work?

#7

Have you tried adding:

 step="any"

To the input?

#8

Yep and it’s still the same.

I also tried it in a new project just to make sure I didn’t have anything messing with it in my project.

This is all I have while testing it if you wanted to try it.

    <div class="container mt-5">
        <div class="row">
            <div class="col">
                <input id="inp_num" name="inp_num" type="number" step="any" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <button id="btn1" class="btn btn-primary" dmx-on:click="inp_num.setValue((inp_num.value + &quot;1&quot;))">1</button>
                <button id="btn2" class="btn btn-primary" dmx-on:click="inp_num.setValue((inp_num.value + '.'))">.</button>
            </div>
        </div>
    </div>
#9

Could the following be adapted to your use case Eric? It is not a fix for the above but seems to work…

https://code-boxx.com/pure-javascript-numeric-keypad/

#10

I could probably get it to work. Is this just a Wappler bug then?

I tried adding a heading that just shows the value of the input and it shows fine.
Imgur

So, it has the number in the input correctly, but it is just not displaying it if it ends in a .

#11

I’m not sure it is. I think it is the implementation. Quite a different usage to the norm for form inputs. Have only seen this sort of thing done using JavaScript personally. Sorry I was of no help Eric.

1 Like
#12

Can you change the input type to text and try again?

#13

That’s what I ended up doing. I found out it was giving this error

formElement.js:102  
The specified value "1." cannot be parsed, or is out of range.
_setValue@formElement.js:102setValue@formElement.js:26Object.keys.forEach.data.<computed>@BaseComponent.js:463(anonymous)@parser.js:717t@parser.js:468(anonymous)@parser.js:459dmx.parse@parser.js:394(anonymous)@on.js:8a@events.js:280

it seems like the number input doesn’t consider 1. a valid number.

So I changed it into a text input and added some stuff so that it only accepts numbers and a decimal point, and I think it will all work fine.

1 Like
#14

Is this file from Wappler? Might be worth opening a bug report

#15

I’m pretty sure it is, I can double check tomorrow or Monday.

#16

If it’s in the dmxAppConnect folder I assume that means it’s from Wappler?
Imgur
@Teodor Should I make a bug report for this or can you guys just look through this thread? Or is it not something to even worry about? I did find a workaround.

#17

It is not really a bug in App Connect but how the number input works.

If you test the following code you get the exact same error.

<input type="number" id="nr">
<button onclick="document.getElementById('nr').value = '1.'">Set Value</button

When setting the value on a number input it will try to parse the string as a number and 1. throws an error here. This is an implementation of the browser and not something we can change.

Instead of using a number input use a standard text input.

1 Like