CODEWITHSUNDEEP
jqueryjquery-uimobileinputtouchscreen
Evanss
Evanss

Reputation: 23583

Make text input unselectable for touchscreens?

Im using jQuery UI to make a range slider. The plugin creates a text input in the html to display the range value. The issue is the text area is selectable on touchscreen devices, even if its not then editable.

How can I stop the text input being selectable? Ive tried the following CSS:

-moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 user-select: none;

And the following jQuery: 

$("#amount, #amount2").mousedown(function (evt) {
       evt.stopImmediatePropagation();
       return false;
   });

$("#amount, #amount2").disableSelection();

Upvotes: 2

Views: 1975

Answers (4)

dockeryZ
dockeryZ

Reputation: 3981

Another way would be to not use a textarea. Use PHP's GD Library instead to create something that looks like a textarea.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

It seems that the CSS user-select CSS approach does work (at least in Chromium 18/Ubuntu 11.04:

#amount {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none;
}​

JS Fiddle demo.

Upvotes: 2

Evanss
Evanss

Reputation: 23583

Its a bit clumsy but ive found a solution that works. Ive just positioned divs with no content over the input so its not selectable but looks and behaves like a normal input in every other way. Thanks

Upvotes: 0

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

EDIT: You could create your own disableSelection() like this:

jQuery.fn.extend({ 
        disableSelection : function() { 
                return this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        jQuery(this).css('user-select', 'none'); 
                        jQuery(this).css('-o-user-select', 'none'); 
                        jQuery(this).css('-moz-user-select', 'none'); 
                        jQuery(this).css('-khtml-user-select', 'none'); 
                        jQuery(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
});

Use like this: 

if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 ){
 // touch screen detected
 $("#amount, #amount2").disableSelection(); 
}

Upvotes: 0

Related Questions