Filtering WebTextField Input

Chris_O_Brien · November 3, 2015, 8:45am

Hi

Is there a way to filter a WebTextField so, for example a Number Type field will only accept numbers and not alpha?

Thanks

Michel_Bujardet · November 3, 2015, 10:24am

[quote=226321:@Chris O’Brien]Hi

Is there a way to filter a WebTextField so, for example a Number Type field will only accept numbers and not alpha?

Thanks[/quote]

That is what the Number Field available in the Library does…

Chris_O_Brien · November 3, 2015, 10:33am

I don’t know the emoticon for scratch the head, but I can type a,b,c into a number field taken from the library (the field displays with the arrow up and down)

Albin_Kiland · November 3, 2015, 10:34am

I see why you might think that(my though too initially) but that’s not the caseit seems.
What that does is to select the default keyboard(keypad) on mobile devices. It does not allow only 0-9 to be entered by the user

Michel_Bujardet · November 3, 2015, 10:39am

[quote=226346:@Albin Kiland]I see why you might think that(my though too initially) but that’s not the caseit seems.
What that does is to select the default keyboard(keypad) on mobile devices. It does not allow only 0-9 to be entered by the user :/[/quote]

On Mac Chrome it does filter input, but not on Safari or FireFox. I strongly suspect a bug. Greg, are you here ?

Will post a JavaScript workaround shortly.

Michel_Bujardet · November 3, 2015, 11:11am

Here is a workaround. Use this in a normal TextField (NOT number) :

Sub Shown() dim js as string js = js + " var myinput= document.getElementById('"+me.ControlID+"').getElementsByTagName('input'); " js = js + "myinput[0].setAttribute('onkeypress', ""if(this.value.match(/\\\\D/)) this.value=this.value.replace(/\\\\D/g,'')"");" js = js + "myinput[0].setAttribute('onkeyup', ""if(this.value.match(/\\\\D/)) this.value=this.value.replace(/\\\\D/g,'')"");" self.ExecuteJavaScript(js) End Sub

I have also investigated the content of the DOM, while I was at it. Xojo does set the input type to number, so it should be honored by browsers the same way as Chrome does. Unfortunately that does not seem to be the case.

Chris_O_Brien · November 3, 2015, 2:53pm

Thanks very much Michel.

It does the job (considering)

I’d like to say a quick thanks to yourself and all of the team who provide such quick and excellent support

Chris_O_Brien · November 3, 2015, 2:58pm

I am just trying to make sense of your javascript code (which is not my fort, I’m afraid) so I can include a period and comma (european decimal), but I’m back to scratching my head again

Any chance you could help?

Thanks again

Michel_Bujardet · November 3, 2015, 4:51pm

Just for the record, I am not Xojo. Just a user like you.

[quote=226393:@Chris O’Brien]I am just trying to make sense of your javascript code (which is not my forté, I’m afraid) so I can include a period and comma (european decimal), but I’m back to scratching my head again

Any chance you could help?

Thanks again[/quote]

You are right, I just went for digits. Let me see what I can do.

Chris_O_Brien · November 3, 2015, 5:12pm

I’m sorry for the assumption. A doubly big thanks Michel. Very kind of you devoting your time and no sweat if you don’t manage the tweak. .

Michel_Bujardet · November 3, 2015, 5:19pm

No problem. The issue with the JavaScript is that for convenience, it simply does a replace of anything that is not a digit by “”. I have to work a bit more on actually filtering characters.

Chris_O_Brien · November 3, 2015, 5:54pm

Very good. The code makes more sense to me now and a great help. I think, with that information, I should be able to modify your example to suit.

Thanks again

Michel_Bujardet · November 3, 2015, 6:40pm

Here is a better keytrap, which uses JQuery.

Place in App.HTMLHeader the following code :

[code]

[/code]

In a constant named keysFilter :

Const keysFilter As String = "$('#ControlID').keydown(function(e) { if (e.keyCode != 188 && e.keyCode != 190) {if (e.keyCode > 57 || e.keyCode < 48) { e.preventDefault(); }} }) ;"

In the TextField :

Sub Shown() ExecuteJavaScript(Replace(keysFilter,"controlID",me.ControlID)) End Sub

Chris_O_Brien · November 3, 2015, 6:52pm

Gentleman

Thanks Again

Michel_Bujardet · November 3, 2015, 8:18pm

[quote=226446:@Chris O’Brien]

Gentleman

Thanks Again[/quote]

You’re welcome.

Michel_Bujardet · November 3, 2015, 8:57pm

Nothing is ever completely simple. I had some doubts about the numerical keypad of the PC. It appears the keycodes are not the same, so here is a new keysFilter :

$('#ControlID').keydown(function(e) { if (e.keyCode != 188 && e.keyCode != 190 && e.keyCode != 110 ) {if (e.keyCode > 57 || e.keyCode < 48) { if (e.keyCode > 105 || e.keyCode < 96) { e.preventDefault(); }}} }) ;

Chris_O_Brien · November 5, 2015, 2:11pm

One quick last thanks Michel. It works a treat - I changed the constant to a method to allow me it include or exclude negatives as well as allowing backspace and arrow keys.

Thanks again for all the help