Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to disable MobileSafari auto-selection?

my webapp requires users to tap and hold on an element for a game action,
but iPhone automatically "selects" the area which is confusing to the user.

anyone know what html elements prevent selection, or if javascript can block selection?

any help is appreciated

like image 524
pop850 Avatar asked Nov 25 '09 02:11

pop850


2 Answers

Try handling the selectstart event and returning false.

Try applying the CSS rule, -webkit-user-select: none;

like image 137
SLaks Avatar answered Oct 23 '22 06:10

SLaks


SLaks answer is obviously right - I just want to extend it a bit for future viewers. If you're using jQuery, here's a useful extension method that disables selection in various browsers:

$.fn.extend({ 
        disableSelection : function() { 
                this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        $(this).css('-moz-user-select', 'none'); 
                        $(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
});
like image 28
davemyron Avatar answered Oct 23 '22 05:10

davemyron