Form input modes are an important design pattern when it comes to requesting information from a mobile user. If you want to collect numeric data, you can constrain the input mode of the users’ device so that only numbers can be entered – this both simplifies data entry for the user and reduces the validation issues.

One of the challenging things on mobile is that the input mode is implemented in a variety of ways – see input mode. Just tonight I created an example of how we can make it easy for a site developer to use this input mode feature across a wide variety of devices. I thought I’d share it with you as a great example of how powerful bemoko tweakers are.

As with all bemoko site development, we create sites in standard XHTML markup. There’s an attribute – called “inputmode” – that was added to XHTML Basic v1.1, but still has limited supported. Much more likely is that a device will support the WCSS style “-wap-input-format:'*N'” or the OpenWave “format” attribute. As a site developer you shouldn’t have to care – and bemoko can take the pain away.

A site developer can specify the input mode in an input element using the XHTML Basic v1.1 notation in a standard way, e.g.

<input name="digits" value="" type="text" inputmode="digits"/>

bemoko can (behind the scenes) apply the following tweaker to optimise the markup for the given device and generate the correct input mode controls in the markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class ImputModeTweaker extends AbstractTweakerPlugin {
  void tweakMarkup(Node node) {
    node.'**'.findAll { it.@inputmode == 'digits' }.each { tag ->
      switch (platform.activeUser.device.inputModeSupport) {
        case "useWCSS":
          tag.@class=(tag.@class ? tag.@class + " " : "") + "digits"
          break
        case "useFormatAttribute":
          tag.@format="NNNNN"
          break
      }
    }
  }  
}

Note that this example uses the inputModeSupport DDR vocabulary to get the preferred input mode support. This particular piece of DDR vocabulary will be available in the next bemokoLive release.

Although a site developer shouldn’t have to care about this behind the scenes tweaking, the unique approach to mobile rendering that bemoko have taken, means that a site developer can care if they want. In particular they can take full control of the situation. This has huge advantages – you can build on the solid foundations on the maturing set of plugins and best practices that bemoko provides as well as being able to react and deliver quickly.