Fiori Mobile Disable Keyboard Input

[mustafaonderr]

hi experts,

i have deployed my ui5 project in fiori launchpad(fiori client) with mobile barcode scanner (Zebra TC20) . We are using input to capture the barcode value in the application. When we focus on input field by default soft keyboard of mobile device opens. please give me some suggestion how to disable the soft keyboard in mobile device

[former_member734881]

I had initially used Enes Gulce's answer to this question that did the trick, but then I had a requirement where the user needed to be able to toggle the on-screen keyboard on and off for the field on a device, in case scanning is not possible.

My investigation led me to the UI5 documentation, including an example on extending the UI5 Input control [1], from which I managed to construct the following:

sap.ui.define(
    ['sap/m/Input'],
    function (Input) {
        return Input.extend("co.example.control.Input", {
            metadata: {
                properties: {
                  'inputmode': {type: 'string', defaultValue: 'none'}
                }
            },
            renderer: {
                writeInnerAttributes: function (oRm, oInput) {
                    sap.m.InputRenderer.writeInnerAttributes.apply(this, arguments);
                    oRm.attr('inputmode', oInput.getInputmode())
                }
            }
        })
    }
)

This is less flexible than Enes' solution, but a lot simpler for this scenario. It also allows dynamically setting the value for the 'inputmode' attribute.

You could still take the approach here to make the solution more dynamic by using custom data attributes as Enes did, but overriding the renderer as shown here. (The use of the renderer rather than the onAfterRendering event is key here).

The advantage to doing it this way was that I was able to use binding to a data model to influence the value of the 'inputmode' attribute, thereby allowing dynamic switching via a button on the UI.

Example usage:

<ei:ExtendedInput inputmode="none"
                  change="onBarcodeScan"
                  value="{/ScannedBarcode}"/>

(In my case, I just used a model binding for the 'inputmode' property, rather than a fixed value as in the example above).

1. https://sapui5.hana.ondemand.com/sdk/#/topic/bcee26a4801748f39bf5698d83d903aa