EditType and keyboard layout (ABC or 123)

WEB TMS WEB Core
1

I would set the input layout for the keyboard differently.

weString -> ABCabc etc.
weFloat -> 123.+- etc.
weSignedFloat-> 123.+- etc.
weSignedNumeric 123.+- etc.
weNumeric 123 etc.

Now for the edit fields "weSignedFloat,weSignedNumeric" the ABC layout select. The 123- +. but would much better.
The way I tested it, there is at least one difference on all operating systems
ABCabc etc. and 123 .- + etc.

On the smartphones there is also the keyboard 123 without + - etc.

The other way would be to make the keyboard layout selectable in the edit field.
Regardless of the edit type.
Then you could also use IP addresses with the 123- +. keyboard although it is a westring edittype.

TMS
TMS1560×708 13.9 KB

Test 2.zip (6.8 KB)

2

Sadly, from the browser there is not 100% control on what keyboard type will be shown.
What we map from EditType to HTML INPUT inputmode is based on the different inputmode settings possible and it is the operating system that selects what keyboard will be shown for what inputmode

https://webplatform.news/issues/2019-05-06

3

The real problem is that under iOS the "TEL" keyboard has no +/- etc. Under Android, the "TEL" keyboard contains these characters.

I added the following line to the ".js" file in the function GetInputType.

else if (this.FEditType in rtl.createSet($mod.TEditType.weSignedNumeric,$mod.TEditType.weSignedFloat)) {
        Result = "NUMBER"}

    this.GetInputType = function () {
      var Result = "";
      if (this.FPasswordChar !== "\x00") {
        Result = "PASSWORD"}
       else if (this.FNumeric) {
        Result = "NUMBER"}

       else if (this.FEditType in rtl.createSet($mod.TEditType.weSignedNumeric,$mod.TEditType.weSignedFloat)) {
        Result = "NUMBER"}

       else if (this.FEditType in rtl.createSet($mod.TEditType.weFloat,$mod.TEditType.weNumeric)) {
        Result = "TEL"}
       else if (this.FEditType === $mod.TEditType.weSearch) {
        Result = "SEARCH"}
      return Result;
    };

Thus the other keyboard would appear. Now it is the case that spins then appear in the input field under Windows 10 and OSX. I then hidden this in the "page html".

    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
  
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>

Now I get the correct keyboard under iOS, but under Android another one with even more characters appears.

To make it really "nice", I would have to activate these lines on iOS and not on Android.
But that's probably too complicated.

Is there any other possibility?

I always thought that HTML5 and javascript are the same on all systems and browsers.