Support key event cancelation

Take this snippet to filter a TextInput’s text to numbers only:

tabris.create("TextInput", {
  keyboard: "number"
}).on("input", function(widget, text) {
  widget.set("text", text.replace(/[^\d]/g, ""));
});

After the input callback fires, the cursor is placed at the end of the TextInput (iOS) or at the beginning (Android)–see #537. Assuming this behavior is aligned so that all platforms move the cusor to the end, it still provides an undesirable UX.

For example, if a user were to enter 1256, place the cusror between 2 and 5, and type 34, the input should show 123456 but instead would show 123564. In a browser, the behavior is identical but this can be overcome by recording the <input>'s selectionStart on keydown and providing that value to HTMLInputElement.setSelectionRange() after the setting the <input>'s value on keyup.

I think this would be easiest to simply have a before:input event (as suggested in #529) which could cancel the event if the input doesn’t match the validation criteria.

[cookieguru]

This is now possible with 4a2e12018e9c261127ee8579e2406a3dff58079c

[tbuschto]

Should be no problem.

On 22 February 2016 at 22:40, Tim Bond [e-mail] wrote:

@ralfstx https://github.com/ralfstx It’s still possible without a cancellable event–you just have to read the position before transforming the value. See this example http://codepen.io/anon/pen/JGQqZx (which uses jQuery Carat https://bitbucket.org/accursoft/caret/wiki/Home). If I enter 12|34 and type “a” the carat stays between 2 and 3. Of course whether or not this approach is possible natively on the three platforms is a different story.

— Reply to this email directly or view it on GitHub https://github.com/eclipsesource/tabris-js/issues/776#issuecomment-187398507 .

Innoopract Informationssysteme GmbH [e-mail] Tel: +49 721 - 66 47 33 - 0 Fax: +49 721 - 66 47 33 29