Javascript onkeypress event not working in webviewer

MIT App Inventor Help
,
#1

Hello, in the code below I have an HTML input which should accept only numbers. The functionality works in Chrome and Edge browsers, but when the page is loaded in the Webviewer component, any keys get accepted. Seems the onlyNumberKey function is not triggered. Any workarounds ?

"input type="text" name="value2" id="value2" min="10" max="99999999" autocomplete="off" > required maxlength="7" onkeydown="return onlyNumberKey(event)" />

    function onlyNumberKey(evt) {
        var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        if (ASCIICode > 32 && (ASCIICode < 48 || ASCIICode > 57))
            return false;
        return true;
    }
#2

Please provide a full example html file we could test / verify...

It might be possible to callup the number keyboard only, or perhaps create your own number keyboard with components and blocks....or in the html

#3

inputevent.txt (769 Bytes)

Here is a shortened version of the page. Please rename the file as .html to view in a browser.

#4

I have tried a few things, but to no avail. You may need to build your own numbers only keyboard and use the webviewstring....

1 Like
#5

Either use App Inventor's web view string, or try the Custom Web View Extension which is more powerful:

#8

Tried with the CustomWebView, but the AI2 companion crashes. Seems I'll need to stick with the classic webviewer and wait for a bug fix.

#11

It will only crash if improperly setup.

blocks

1 Like
#12

Great. I've got it setup and the companion no longer crashes.

However, I now have an access issue to read the .html file.
The original WebViewer had no problem displaying the local file which was uploaded via media:
file:///storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/assets/salogin.html

The CustomWebview is giving me an error:
net:ERR_ACCESS_DENIED

I've tried changing the file settings to no avail.
http://localhost/salogin.html
file:///appinventor_asset/salogin.html

image

#13

Like this:

image
image856×383 41.7 KB

However, "having tested it", still appears to allow the entry of letters

#18

Actually - why can't the number be input to a Numbers-only Text Block in the App, and then be sent to the HTML page via webviewstring or JavaScript?

1 Like
#19

@ChrisWard, in the finished product, the HTML page will be hosted at a cloud provider, and will also be accessed from desktop browsers. I'm trying to keep the interoperability at a maximum to avoid switching between features in the app and webpage.

#20

You should have told us that from the beginning TechFarmer! That is very different from interaction with an HTML page in App Assets.

Edit - there is a good chance that the Custom Web View will work with an online page, but you need to correct your code, it's not HTML5 compliant. Also, life would be easier if you didn't try to restrict the length of the input - if necessary you can reject input that exceeds the limit. That way, the numbers problem is solved as the input can be set to numbers only. You can always have a label alongside saying "max 7 digits".

#21

So, like this:

inputintegers.html.txt (1.1 KB)

blocks

I have uploaded the HTML to my website, so the App Project should work for you via the Companion. The App Project contains the Custom Web Viewer Extension, which I know you have already downloaded. Once you have the Project, let me know and I will delete it from this post as Users must obtain Extensions from the appropriate channel.

#22

@ChrisWard thank you, I've got it. I will test at my end.

#23

Works with built-in webviewer, no extensions required...

image

#26

Indeed, for a regular number it works as expected. When I initially posted regarding the Javascript event, I hoped that once the key trap worked, I could expand the same principle to a custom mask on an input box and trap user input in realtime.

#27

If the User enters a value greater than max, the Browser will reject it (with a pop-up). It's unusual to apply a restriction on the number of digits.

#28

Try this one:
inputintegers.html.txt (1.1 KB)

#29

@ChrisWard , @TIMAI2 thank you for the help so far.

Unfortunately, the requirement for having the keypress event is still needed (customer), rather than performing the validation at submit. What would be the appropriate channel for requesting a bug fix ?

#30

It is not a bug, just a limitation of the Android Webview implementation in AppInventor.

1 Like