Number keyboard style with minus (-) and comma (,)

[capc0]

Is there any chance to show a keyboard (specifically on iOS 13) for number inputs that allow negative numbers as well as decimal numbers (like -123,4) ?

I tried all combinations of type and inputmode on my input element, but none seem to work.

Only <input type="text" inputmode="text"> allows those inputs, but the user would have to change the keyboard from characters to numbers every time.

desired result

[smardine]

Hi, i just find a workaround : replace <input type="number" inputmode='numeric"/> by <input type="number" inputmode='decimal'/> in your html, it work for me, at least for the decimal separator

[miromanestar]

The most likely solution I've found is to add it to the accessory bar. I'm not yet sure how to do that with ionic yet, but I'm working on it.

[capc0]

@Kinectech would be awesome if you can share your solution if you come up with one :)

[almothafar]

Any news on this? i have the same issue even with <input type="number" inputmode='decimal'/> I have something like <ion-input [(ngModel)]="latitude" [required]="true" inputmode="decimal" max="90" min="-90" name="latitude" type="number">

[capc0]

@almothafar unfortunatly I did not find any solution to get the desired result of a large number pad, minus sign and decimal sign.

I ended up placing a custom minus button manually in an ion-footer that is only visible when the keyboard is open... 😕

[delvinwidjaja]

@capc0 Hi! I'm looking for a workaround to fix this, could you please share yours here?

[capc0]

sure. It is not complete, but somehing along these lines.

You still have to handle setting the lastFocusedNumberInput as an internal variable within onFocused

...

<ion-input type="text" [inputmode]="'decimal'" (ionFocus)="onFocused($event)">
</ion-input>
...

<ion-footer *ngIf="isIphone && isKeyboardVisible && lastFocusedNumberInput">
    <ion-toolbar color="light" style="--ion-color-base: #f0f0f0 !important; --min-height: 24px;">
        <div style="display: flex; text-align: center">
            <ion-button class="customMinusButton" color="light" (click)="onMinusClicked($event)">
                <ion-icon slot="icon-only" name="remove"></ion-icon>
            </ion-button>
        </div>
    </ion-toolbar>
</ion-footer>

.customMinusButton {
    --border-width: 1px  !important;
    --border-color: #dddddd;
    --border-style: solid;
    --box-shadow: 0px 1px #cecece !important;
    align-self: center;
    width: 30vw;
    --ion-color-base: white !important;
    height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 34vw;
}

...
this.isIphone = this.platform.is('iphone');
window.addEventListener('keyboardWillHide', this.onKeyboardHideListener);
window.addEventListener('keyboardWillShow', this.onKeyboardShowListener);
...
    private onKeyboardHideListener = () => {
        this.isKeyboardVisible = false;
    };

    private onKeyboardShowListener = () => {
        this.isKeyboardVisible = true;
    };
...
    onMinusClicked(event: Event) {
        if (this.lastFocusedNumberInput) {
            if (this.lastFocusedNumberInput.value == null || this.lastFocusedNumberInput.value === '') {
                this.lastFocusedNumberInput.value = '-';
            }
            else if (this.lastFocusedNumberInput.value.length > 0 && this.lastFocusedNumberInput.value[0] !== '-') {
                this.lastFocusedNumberInput.value = '-' + this.lastFocusedNumberInput.value;
            }
            // trigger an input event so that ionic updates the model
            const inputEvent = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            this.lastFocusedNumberInput.dispatchEvent(inputEvent);
            // re-focus to prevent the keyboard from hiding
            this.lastFocusedNumberInput.focus();
        }
    }

[LeiteCastro]

As a partial solution I used:

<input type="text" inputmode="decimal" oinput="onDot(this)>

function onDot(elem) { elem.value = elem.value.replace(".", "-"); }

[MasX15]

hello i found this in reddit and it works for me: php testing in IOS

https://www.reddit.com/r/ios/comments/y2xzvd/change_decimal_separator_from_to_without_changing/

Update: upgrading to iOS 16 solved the issue. Now the option to change this is available in Settings -> General -> Language & Region -> Number Format. Thanks for the answers!

@smardine @almothafar @capc0 @miromanestar @LeiteCastro

As a partial solution I used:

<input type="text" inputmode="decimal" oinput="onDot(this)>

function onDot(elem) { elem.value = elem.value.replace(".", "-"); }