Touch + Input + Focus = Keyboard open and then close

[John]

Do I need to use a timeout function on the tap event of the touch widget?  I have a touch image that is bound to the tap event that draws focus on the input. However, the keyboard opens and then automatically closes.

$plugin.closest('span').append('<img src ="srb-images/srb-delete.png" class="bar">').find('img').kendoTouch({ tap: function(e) {

                                                                                                                               console.log(e.touch.target.attr('class') + " was tapped");

                                                                                                                               e.touch.target.prev().focus();

                                                                                                                               }

                                                                                                                               });

                   });

On the other hand, if I hold the touch for a period of time, the keyboard stays open.

~ richard

iOS simulator

[Petyo]

Hi,

The tap event of the touch widget is based on the touchend DOM event. After a certain delay (~300ms) the browser triggers an emulated click event. Chances are, the click event blurs the input in question. You may try using onclick="return false;" on the tapped element - perhaps it will mitigate the blur. 

Kind regards,
Petyo
the Telerik team

[John]

Hello,
 I tried the onclick="retrun false;" in the image element.  It does not work.  My caretTo method uses 

setSelectionRange(index, index) method to send the caret to index 0, which invokes the focus to the element.  

I tried using just jquery to bind a click event to the image, however it did not work, so I used the Kendoui widget.  Is there anywhere else I can intercept the DOM bubble?


 this.buttonDelete= function() {

                   $plugin.closest('span').append('<img src ="srb-images/srb-delete.png" onclick="return false;" class="bar">').find('img').kendoTouch({ tap: function(e) {

                                                                                                                                

    methods.caretTo.call(e.touch.target.prev(),0);

}

                                                                                                                               });

                   }

thank you,

richard

[John]

Petyo,

Thanx for the reply.  

I have a working version in a static page under input + kendoui + phonegap.  I m only using query, since the touch widget is an over kill for this situation. I used the data-show event to init the inputs. It appears to load ok, but the image does not recognize the bound event.  This view is an external link.  Is there more pre transiton setup to do?  It kinda behaves as if jquery is not loaded.  I can click on the image several times until it fires.

~ cheers

[Petyo]

Hi John,

I am not sure that I completely understand your project setup. Anyway, if preventing the click event does not work for your case, you may consider using the timeout approach initially mentioned. 

In case you still need assistance with this problem, is it possible for you to provide a sample project, so that we can reproduce the issue on our side? 

Thank you in advance,
Petyo
the Telerik team