Tag Archives: form

Preventing Webview Bounce and Keyboard Layout Shift

11 Apr 2015

Using libraries over frameworks means that there are few things that you have to do yourself. Preventing webview bounce – as can be seen in mobile Safari – is one of them. This is especially true since you are most likely using a scrolling library such as iScroll. Webview-bounce and iScroll don’t play well together. This issue turns out to be an easy one to solve. simply add this to your project:

document.ontouchmove = function(e){e.preventDefault()};

The next irritation for us web app developers is how the keyboard moves the screen around when it appears. It will move your layout to ensure that the focused input element is visible. The caveat is that iOS will not return the layout to its previous position if the user touches the layout to put away the keyboard instead of tapping the “hide keyboard” button. Even the “hide keyboard” button may not return the view to normal.

This is also easily solved, add this to your project:

var repositioner = null;
$('body').on('blur','input,area',function(){
  repositioner = setTimeout(function(){window.scrollTo(0,0;},200);
});
$('body').on('focus','input,area',function(){
  clearTimeout(repositioner);
});

Why the setTimeout? Well, lets say we only set a listener for the blur event. When an input element gains focus iOS will display the keyboard and shift the entire view up. With the keyboard still visible you could touch and thereby give focus to other input elements. But, giving focus to a different element blurs the previously focused element. This causes the view to bounce up on the blur event and then back down on the focus per what iOS feels like doing. Basically, the view bounces up and down as you touch form elements (this wont happen if you use the iOS keyboard’s built-in input tabbing).

By giving mobile Safari a 200 milisecond timeout we prevent the bouncing screen when touching input elements. Once the user puts away the keyboard the timer is quick and repositions your web app without a perceptible delay.

Sencha Touch: Adding/Removing Asterisk in Required Fields

08 Mar 2012

Another day, another thing learned. Today its those little asterisk’s that appear next to the labels of required fields in Sencha Touch 1. You can set them so that they appear when the component is instantiated via the “required” config option but there is no method to add or remove them after the fact. Also, if you are building your Sencha app the old non-mvc way that means that no components are not being destroyed/created as needed, so you can’t set the value for “required” to be an expression (i.e., something ? true : false) because if you do it will only work once – when the component is created.

Looking at the html that Sencha produces I see that a class is added to the component that is responsible for the appearance of the asterisk. Since Sencha does provide a method to add/remove classes the solution couldn’t be simpler:

...
// too add the asterisk to the form element refer to its div and:
Ext.getCmp('id_of_field').addCls('x-field-required');
// to remove the asterisk from the form element:
Ext.getCmp('id_of_field').removeCls('x-field-required');
...

Keep in mind that this is just a visual thing – no matter how you set the component’s “required” property there is no impact on any form validation.