Capturing keys in web textfield

I have a text field in a web control that I need to capture the keystroke BEFORE it is entered so the user can only enter digits (0-9) in the field. On desktop apps I used KeyDown for such occasions but apparently web field only has the KeyPressed event which only fires after the key is released. This makes it difficult to disallow certain characters in a textbox. I can make it where it deletes the character after the key is released but that looks bad. Since there is no mask option for web text controls I can’t fix it that way and if I set the field to be a number field it still seems to accept alpha characters and I get the little up/down arrows on the filed which I don’t need.

Is there any way to make it accept only 0-9 and backspace keys?

There is no way to intercept key strokes, as it would be with keydown in a desktop app.

The only way I see is to use TextChanged to monitor and change eventually what was entered :

Sub TextChanged() dim c as string dim d as string for i as integer = 1 to len(Me.Text) c = mid(Me.Text,i,1) if instr("1234567890",c) > 0 then d = d+c end if next Me.Text = d End Sub

Because data has to travel between the browser and the app, if user enters a letter, it will be visible shortly, before the routine erases it.

Remember the app is on “the server” somewhere.
And the UI is in a web browser somewhere else.
Theres latency.
By the time the app on the server gets “key pressed” the user has likely already long since released the key & moved on to type something else.
Thats the nature of the internet.
To filter it like you did in a desktop app you literally need something in the browser side that can filter keystrokes BEFORE that end even tries to send them to your app running on the server.

Here’s my solution for this Kobayashi Maru:

Don’t allow tab, enter, spacebar on keydown

ExecuteJavaScript("  $('#txtcc').keydown(function(e) { if (e.keyCode == 9 || e.keyCode == 13 || e.keyCode==32 ) {   e.preventDefault(); } }) ; ")

only allow delete/backspace and 0 - 9 on keypress

ExecuteJavaScript("  $('#txtcc').keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")

I use jQuery quite a bit in my ASP.Net/VB.Netcode. I tried these snippets in Xojo and they seem to work okay in IE 8, Safari and Chrome at this point.

I was precisely wondering how to implement the JS keydown event in Xojo WE, and you just post these two methods :slight_smile:

Now, I am confused : where do you place the ExecuteJavaScript for it to monitor the keyboard and filter input ? Is “txtcc” the ControlID of the WebTextField ?

Could you please be so kind to explain step by step, or even better, post the working snippet project you tested ?

Thank you in advance !

PS : Thank you for saving the Kobayashi Maru.

txtcc is the ID I give the Xojo control using jQuery.

The Name of the WebTextField in this example is txtcmp_code1

From what I can see the Name of the control can’t be used in jQuery. You have to set the ID of the control first to be able to manipulate it with the ID.

Some tips:

My approach is to load jQuery into HTMLHeader

[code]

[/code]

This code is on the Shown event for the Webpage.

    'the ID's are generated on the fly by Xojo, so you need to reset the ID of the Xojo control to do all of this
    ExecuteJavascript("document.getElementsByName('txtcmp_code1')[0].id= 'txtcc' ;  " )
    
    'prevent tab,enter, spacebar
    ExecuteJavaScript("  $('#txtcc').keydown(function(e) { if (e.keyCode == 9 || e.keyCode == 13 || e.keyCode==32 ) {   e.preventDefault(); } }) ; ")
    
    'only allow delete/backspace and numbers
    ExecuteJavaScript("  $('#txtcc').keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")

That’s really all there is to it.

Does this make sense?

In Xojo, HTMLHeader is read-only. So I loaded jQuery in a PageSource I placed on the WebPage.

In the shown event, things did not go quite smoothly.

I added a TextField on the page called txtcmp_code1 as I guess is the name of the control in your first line of code.

When run, the code triggers the following error :

[code]Could not execute returned javascript: $ is not defined
Source: document.getElementsByName(‘txtcmp_code1’)[0].id= ‘txtcc’ ;

$(’#txtcc’).keydown(function(e) { if (e.keyCode == 9 || e.keyCode == 13 || e.keyCode==32 ) { e.preventDefault(); } }) ;

$(’#txtcc’).keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode , allow_key_codes) < 0 ) { e.preventDefault(); } }) ;[/code]

From what I understand the first line is OK but the issue is with the following lines.

In case the change of ID in the first line was the cause of the issue because in Xojo ControlID is read only, I tried :

[code] ‘prevent tab,enter, spacebar
ExecuteJavaScript(" $(’#"+txtcmp_code1.ControlID+"’).keydown(function(e) { if (e.keyCode == 9 || e.keyCode == 13 || e.keyCode==32 ) { e.preventDefault(); } }) ; ")

‘only allow delete/backspace and numbers
ExecuteJavaScript(" $(’#"+txtcmp_code1.ControlID+"’).keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode , allow_key_codes) < 0 ) { e.preventDefault(); } }) ; ")[/code]

But still, I get the $ is not defined error.

Finally, I tried to remove the “$” which after all could simply be a prompt, and get :

Could not execute returned javascript: Object #txtcc has no method 'keydown'

Your insight will be appreciated.

I’m guessing jQuey is not loaded. Under Web Settings, HTMLHeader you should be able to copy the links there by clicking on the pencil and pasting in the code. Is that where it is read only?

My mistake. I looked at Session properties and did not think about App properties in the inspector.

Now it works fine.

Thank you so much Michael :slight_smile:

You are very welcome!

Thank you Michael Rucker - you are a hero!!

I have same problem - how to enforce numeric entry to webtextfield.

Your solution works perfectly!

I found this should be enough do only allow numbers
Space don’t do anything and I would want my users to be able to tab out of the field :slight_smile:

Thanks for the code!

  'only allow delete/backspace and numbers
  ExecuteJavaScript("  $('#" + me.ControlID + "').keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")

Tried in Firefox just now and not even numbers are allowed in the field?

This works in latest Firefox with one little change.
Change: .keypress
To: .keydown

  'only allow delete/backspace and numbers
  ExecuteJavaScript("  $('#" + me.ControlID + "').keydown(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")

Edited to work on Firefox and other browsers:

  Select Case Session.Browser
  Case WebSession.BrowserType.Firefox
    ExecuteJavaScript("  $('#" + me.ControlID + "').keydown(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; " _
    + "if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")
  Else
    ExecuteJavaScript("  $('#" + me.ControlID + "').keypress(function(e) { var allow_key_codes = [8,46,48,49,50,51,52,53,54,55,56,57]; " _
    + "if ( $.inArray(e.keyCode  , allow_key_codes) < 0  ) {   e.preventDefault(); } }) ; ")
  End Select

The Num pad don’t work in Firefox though. Only the "other number keys"…

Wow!
Thanks Albin, I had not noticed this Firefox issue in testing!

Big THANKS to both Michael & Albin for sharing your code snippets!! Great help.

:wink:

@Tony Davies Does this work for you on a deployed app?
When I deploy as Standalone I get a JS error everytime. Works fine in debug though.
My deployed app is behind HAProxy but I don’t see how that could affect anything.

is there a system to call via javascript a method when use special key ?
sample
press 1,2,3…,0,a,b,c…,z,A,B,…,Z passed to webtexfield
use keyUp,KeyDwn,Esc,etc etc passed to method doPioPioMaoMao ?

[quote=372870:@Massimiliano Chiodi]is there a system to call via javascript a method when use special key ?
sample
press 1,2,3…,0,a,b,c…,z,A,B,…,Z passed to webtexfield
use keyUp,KeyDwn,Esc,etc etc passed to method doPioPioMaoMao ?[/quote]
You could do this with the KeyPressed event, but it’s worth noting that this generates a LOT of traffic to and from the server.

What is it that you are trying to accomplish?