Numeric input element with trigger of numeric keypads on mobile platforms

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 2:47 am

Dear Sir,

We have a UI element with numeric input needs (e.g. 'Amount' = 1234).
Actually we use a simple textBox with manual validation (based on bool double.TryParse(string s, out double result)).

The only problem: the user have to change the virtual keyboard of mobile platform from text to numeric everytime -which is so uncomfortable/time consuming.

So, our questions: is there any way to:
-change virtual keyboard from text to numeric programmatically ?

or more better:

-use textbox or any other user input element, similar in HTML5:
<input type="number" name="quantity" min="1" max="5">
or at least:
<input type="number">

or even more better:
-to use/handle any external HTML5 UI element (similar to: as we can use external javascripts with CSHTML5.Interop.ExecuteJavaScript (), is it possible to embed native HTML5 coomponents in XAML code ? -yes I'm sure it will not work in Simulator, but who cares ?)

Really thanks for your kind reply,
Best Regards,
Péter

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby JS-Support @Userware » Wed Jul 27, 2016 2:54 am

Hi,

Yes, this possible.

One way is to define a class that inherits from Control, and then, in the constructor, call the following code:

Code: Select all

CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"">");


Here is an example:
http://forums.cshtml5.com/viewtopic.php?f=4&t=1487

Regards,
JS-Support

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 3:57 am

Hi,
Big thanks ! -I've tried: it's easy to do that & a numeric input is there.

The last question: how to get back the value from it ?

e.g.:
we have a class :
public class InputNumberUserControl : UserControl
{
public InputNumberUserControl()
{
CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"">");
}
}

we use it in XAML:
<local:InputNumberUserControl x:Name="inputNumber_Test1"/>

How to reference inputNumber_Test1 from C# ?

(Frankly speaking I do not understand how & where to use GetDiv())

Thanks,
Péter

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby JS-Support @Userware » Wed Jul 27, 2016 4:14 am

This is how you can add a property to your InputNumberUserControl that returns the value currently contained in your HTML <input> element:

Code: Select all

using System;
using Windows.UI.Xaml.Controls;

namespace MyApplication
{
    public class InputNumberUserControl : UserControl
    {
        double _value;

        public InputNumberUserControl()
        {
            CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"">");
        }

        public double Value
        {
            get
            {
                if (CSharpXamlForHtml5.DomManagement.IsControlInVisualTree(this))
                {
                    object htmlInputElement = CSHTML5.Interop.GetDiv(this);
                    string valueAsString = Convert.ToString(CSHTML5.Interop.ExecuteJavaScript("$0.value", htmlInputElement));
                    double.TryParse(valueAsString, out _value);
                }
                return _value;
            }
        }
    }
}


Regards,
JS-Support

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 4:33 am

thanks !
and how to set?
:)

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby JS-Support @Userware » Wed Jul 27, 2016 4:37 am

To set, use:

Code: Select all

CSHTML5.Interop.ExecuteJavaScript("$0.value = $1", htmlInputElement, value);


(for reference: How to call JavaScript from C#)

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 4:40 am

Quick enough !!
Thanks.

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 5:00 am

One more thing: and is there a chance to add event handler ? -e.g. like:

<element onchange="myScript">

:)

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby JS-Support @Userware » Wed Jul 27, 2016 5:22 am

Yes, this is possible.

You can see an example in the Esri mapping control, where clicking on the map calls a C# callback:
http://forums.cshtml5.com/viewtopic.php?f=7&t=272

Here is the relevant piece of code:

Code: Select all

Interop.ExecuteJavaScript(@"
// This is the JavaScript code:
   ...
var onClick = $1;
   ...
// Here we register the callback:
map.on('click', onClick);
   ...
", ..., (Action<object>)OnClick, ..., ...);


void OnClick(object args)
{
   // This is the C# callback
   ....
}


Another example is the FileOpenExtension, where the "addEventListener" method of JavaScript is used:
http://forums.cshtml5.com/viewtopic.php?f=7&t=522

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Wed Jul 27, 2016 7:25 am

please, help ! -I tried a several ways, but the event callback not working:

// constructor:
public InputNumberUserControl()
{
CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"" min=""0"" >");
this.Loaded += InputNumberUserControl_Loaded;
}

// to be absolutely sure visual tree ok:
private void InputNumberUserControl_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
var succ = CSharpXamlForHtml5.DomManagement.IsControlInVisualTree(this);
if (succ)
{
object htmlInputElement = CSHTML5.Interop.GetDiv(this);
CSHTML5.Interop.ExecuteJavaScript(@"var onChange = $1; $0.onchange = function(){onChange};",
htmlInputElement, (Action<object>)this.OnChanged
);
}
}

// Event handler -never hit ! :(
void OnChanged(object args) // This is the C# callback
{
MessageBox.Show("changed");
}

Thanks !
Péter

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Thu Jul 28, 2016 1:06 am

what should be logical, but doesn't work too the following syntax:

CSHTML5.Interop.ExecuteJavaScript(@"$0.onchange = function(){$1};",
htmlInputElement, (Action<object>)this.OnChanged
);

But, unfortunately: exception in Simulator:

---------------------------

---------------------------
---- JAVASCRIPT ERROR ----



DESCRIPTION: Uncaught SyntaxError: Unexpected token (



LAST EXECUTED CODE:

var element = document.getElementById("id224");if (element) { element.style.boxSizing = "border-box"; }
---------------------------
OK
---------------------------

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby Sesztak » Thu Jul 28, 2016 2:01 am

Dear JS-Support,
In the meantime I've found a solution (but not the explanation) as follows:

background info: there are two version of 'onchange' event (from HTML5/JS point of view): 'onchange' and 'EventListener':

object.onchange=function(){myScript};
or/alternative:
object.addEventListener("change", myScript);


-if we use the older 'onchange': it doesn't work : no C# callback/event handler hitted,
-if we use the newer 'addEventListener': works perfectly: C# callback/event handler hitted as expected.

details /only focused on : Interop.ExecuteJavaScript part:

LET ME EMPHASIZE in advance: both A & B is perfectly correct according HTML5/JS specification :

A.) first the NOT WORKING WAY !!:
object htmlInputElement0 = CSHTML5.Interop.GetDiv(this); // this means: class InputNumberUserControl : UserControl
CSHTML5.Interop.ExecuteJavaScript(@"var onChangedScript=$1; $0.onchange=function(){onChangedScript};",
htmlInputElement0, (Action<object>)this.OnChanged
);

B.) The WORKING WAY:
CSHTML5.Interop.ExecuteJavaScript(@"var onChangedScript=$1; $0.addEventListener(""change"", onChangedScript);",
htmlInputElement0, (Action<object>)this.OnChanged
);

So, I hope it help others :)

Anyway: I have no idea why the first one accoring point A is not working ??

Best Regards,
Péter

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Numeric input element with trigger of numeric keypads on mobile platforms

Postby JS-Support @Userware » Thu Jul 28, 2016 8:23 am

Thank you very much Péter.

I don't know why the first solution didn't work. It appears to be a JS problem.

Your solution will indeed help other people.

Thanks.
Regards,
JS-Support


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 42 guests