2

jQueryUIを使用して範囲スライダーを作成しています。プラグインは、範囲値を表示するためにhtmlにテキスト入力を作成します。問題は、テキスト領域が編集可能でなくても、タッチスクリーンデバイスで選択可能であるということです。

テキスト入力の選択を停止するにはどうすればよいですか？私は次のCSSを試しました：

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

そして次のjQuery：

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

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

4 に答える 4

2

CSS user-selectCSS アプローチは機能しているようです(少なくとも 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 フィドルのデモ。

于 2012-05-28T14:51:05.610 に答える
0

別の方法は、テキストエリアを使用しないことです。テキストエリアのようなものを作成するには、代わりに PHP の GD ライブラリを使用してください。

于 2012-05-28T15:03:57.937 に答える
0

編集：次のように独自のものを作成できますdisableSelection()：

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'); 
                }); 
        } 
});

次のように使用します。

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(); 
}
于 2012-05-28T14:03:02.257 に答える
0

少し不器用ですが、うまくいく解決策を見つけました。入力の上にコンテンツのない div を配置したので、選択できませんが、他のすべての方法で通常の入力のように見え、動作します。ありがとう

于 2012-05-28T15:01:00.267 に答える