Capturing keys in web textfield

  1. 4 years ago

    Anthony M

    3 Apr 2014 Pre-Release Testers, Xojo Pro

    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?

  2. 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.

  3. @Anthony M 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.

    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.

  4. Michael R

    8 Jun 2014 Pre-Release Testers, Xojo Pro Concord, NH

    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.

  5. Edited 4 years ago

    @Michael R 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 :)

    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.

  6. Michael R

    9 Jun 2014 Pre-Release Testers, Xojo Pro Concord, NH

    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

    <link type="text/css" href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css' rel="Stylesheet" media="all" />
    <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

    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?

  7. Edited 4 years ago

    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 :

    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(); } }) ;

    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 :

      '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(); } }) ; ")

    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.

  8. Michael R

    9 Jun 2014 Pre-Release Testers, Xojo Pro Concord, NH

    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?

  9. @Michael R 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 :)

  10. Michael R

    9 Jun 2014 Pre-Release Testers, Xojo Pro Concord, NH

    You are very welcome!

  11. 3 years ago
    Edited 3 years ago

    Thank you Michael Rucker - you are a hero!!

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

    Your solution works perfectly!

  12. Albin K

    17 Jun 2015 Europe (Sweden, Jönköping)

    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 :)

    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(); } }) ; ")
  13. Albin K

    17 Jun 2015 Europe (Sweden, Jönköping)

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

  14. Albin K

    17 Jun 2015 Europe (Sweden, Jönköping)

    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(); } }) ; ")
  15. Albin K

    17 Jun 2015 Europe (Sweden, Jönköping)
    Edited 3 years ago

    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"…

  16. 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.

    ;-)

  17. Albin K

    18 Jun 2015 Europe (Sweden, Jönköping)

    @Tony D 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.

  18. 2 weeks ago

    Massimiliano C

    is not verified Feb 9 Europe (Italy, Bergamo)

    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 ?

  19. Greg O

    Feb 12 Xojo Inc Somewhere near Raleigh, NC

    @MassimilianoChiodi 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 ?

    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?

or Sign Up to reply!