# Inputmode binding

**URL:** <https://discourse.aurelia.io/t/inputmode-binding/2968>\
**Category:** Help Requests\
**Created:** [October 3, 2019, 8:48pm UTC](https://discourse.aurelia.io/t/inputmode-binding/2968 "2019-10-03T20:48:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dspublic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dspublic/32/1327_2.png) [@dspublic](https://discourse.aurelia.io/u/dspublic)\
**Post date:** [October 3, 2019, 8:48pm UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/1 "2019-10-03T20:48:33Z")

</div>

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}"\>).

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [October 4, 2019, 12:29am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/2 "2019-10-04T00:29:08Z")

</div>

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.

```auto
<input ref="myInput">

```

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

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [October 4, 2019, 12:42am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/3 "2019-10-04T00:42:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [October 4, 2019, 12:49am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/4 "2019-10-04T00:49:03Z")

</div>

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

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![dspublic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dspublic/32/1327_2.png) [@dspublic](https://discourse.aurelia.io/u/dspublic)\
**Post date:** [October 4, 2019, 8:48am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/5 "2019-10-04T08:48:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![avrahamcool](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avrahamcool/32/368_2.png) [@avrahamcool](https://discourse.aurelia.io/u/avrahamcool)\
**Post date:** [October 4, 2019, 9:23am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/6 "2019-10-04T09:23:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dspublic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dspublic/32/1327_2.png) [@dspublic](https://discourse.aurelia.io/u/dspublic)\
**Post date:** [October 4, 2019, 9:56am UTC](https://discourse.aurelia.io/t/inputmode-binding/2968/7 "2019-10-04T09:56:37Z")

</div>

Hi,

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