Inputmode binding

Help Requests
1

Is there a way to bind the “inputmode” html global attribute? I can’t set it for input tag neither bind (<input inputmode.bind=“inputMode”>) nor interpolation (<input inputmode="${inputMode}">).

3 Likes
2

I’m seeing the same behavior, I was able to workaround by setting it in view model like below. @bigopon/@huochunpeng might have a better idea why this is happening.

<input ref="myInput">

export class MyComponent {
  myInput: HTMLElement;
  
  attached() {
    this.myInput.inputMode = 'tel';
  }
}
3 Likes
3

This will be a nice edition. Thanks for this. Will fix soon and link the PR back here

1 Like
4

so to avoid the ref until the PR you can also use a custom attribute to resolve and register it as a global resource:

import { inject } from "aurelia-framework";

@inject(Element)
export class InputmodeCustomAttribute {
  value: string;

  private element: HTMLElement;

  constructor(element: Element) {
    this.element = element as HTMLElement;
  }

  attached() {
    this.element.inputMode = this.value;
  }
}
3 Likes
5

Hi jbockle,

I’ve tried your suggestion too, but didn’t work for me. I’ve investigated my code again, and I found my typo (i wrote inputmode instead of inputMode).

Thank you for your help

1 Like
6

have you tried input-mode.bind="..."?

2 Likes
7

Hi,

I’ve tried it just now, and yes it works! Many thanks

2 Likes