1

「選択できない」メソッドはテキスト選択を無効にするはずですが、IE、少なくともIE8では正しく機能しません。テキスト カーソルは引き続き表示され、入力が可能です。

Microsoft の同等の CSS 属性「-ms-user-select」が IE10 に最近導入されたばかりで、「公式に」リリースされておらず、現在サポートされていないため、IE9 でも機能しないと想定する必要があります。 Windows 7。

また、Webkit のバージョン ("-webkit-user-select") が含まれていない理由についても質問する必要があります。Webkit が khtml のフォークであることは理解しており、Chrome では意図したとおりに動作しているように見えますが、省略されていることに疑問を感じます。

/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
    var me = this;
    me.dom.unselectable = "on";

    me.swallowEvent("selectstart", true);
    me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
    me.addCls(Ext.baseCSSPrefix + 'unselectable');

    return me;
}

IE10 より古いバージョンの IE で適切な機能を提供するために、このコードを変更する簡単な方法はありますか?

編集:これを機能させるのに少し問題があります。onReady 呼び出しに以下を挿入しましたが、アプリの前に挿入しました。

(function() {
    var Ext = window.Ext4 || window.Ext;

    Ext.override(Ext.dom.Element, {
        unselectable: function() {
            var me = this;
            me.dom.unselectable = "on";

            me.swallowEvent("selectstart", true);

            me.applyStyles([
                '-moz-user-select: none;', 
                '-khtml-user-select: none;', 
                '-webkit-touch-callout: none;', 
                '-webkit-user-select: none;', 
                '-ms-user-select: none;', 
                'user-select: none'
            ].join());

            me.addCls(Ext.baseCSSPrefix + 'unselectable');

            return me;
        },

        selectable: function() {
            var me = this;
            me.dom.unselectable = "off";
            // Prevent it from bubles up and enables it to be selectable
            me.on('selectstart', function(e) {
                e.stopPropagation();
                return true;
            });

            me.applyStyles([
                '-moz-user-select: text;', 
                '-khtml-user-select: text;', 
                '-webkit-touch-callout: text;', 
                '-webkit-user-select: text;', 
                '-ms-user-select: text;', 
                'user-select: text'
            ].join());

            me.removeCls(Ext.baseCSSPrefix + 'unselectable');
            return me;
        },
    });
})();

ただし、次のエラーが発生します。

キャッチされていない TypeError: 未定義のプロパティ 'Element' を読み取ることができません

4

1 に答える 1

1

この行は、IE9 以下でme.dom.unselectable = "on";処理するためにあります。unselectableこれにより、 のような要素に属性が追加され<div unselectable="on">blah</div>、div のテキストが編集できなくなります。それはあなたのために働いていませんか？

残念ながら、Extunselectableとselectableは webkit を完全に処理していないようです。メソッドをオーバーライドすることで修正できます。メソッドをオーバーライドする方法は、使用している SDK のバージョンによって異なります。

アプリ SDK 2.0p および 2.0p2 の場合

これらのバージョンの SDK は、ExtJS 4.0.7 に対してビルドされています。Ext.overrideExt 4.0 では、 を使用してパッチを適用することはできませんExt.Element。したがって、もう少し手動でプロトタイプを変更する必要があります。

Ext.core.Element.prototype.unselectable = function() {
   var me = this;
   me.dom.unselectable = "on";

   me.swallowEvent("selectstart", true);

   me.applyStyles([
    '-moz-user-select: none;', 
    '-khtml-user-select: none;', 
    '-webkit-touch-callout: none;', 
    '-webkit-user-select: none;', 
    '-ms-user-select: none;', 
    'user-select: none'
    ].join());

   me.addCls(Ext.baseCSSPrefix + 'unselectable');

   return me;
};

Ext.core.Element.prototype.selectable = function() {
   var me = this;
   me.dom.unselectable = "off";
   // Prevent it from bubles up and enables it to be selectable
   me.on('selectstart', function(e) {
       e.stopPropagation();
       return true;
   });

   me.applyStyles([
    '-moz-user-select: text;', 
    '-khtml-user-select: text;', 
    '-webkit-touch-callout: text;', 
    '-webkit-user-select: text;', 
    '-ms-user-select: text;', 
    'user-select: text'
    ].join());

   me.removeCls(Ext.baseCSSPrefix + 'unselectable');
   return me;
};

内部で最初にこれを行う必要がありますRally.onReady()

アプリ SDK 2.0p3 以降の場合

2.0p3 以降の App SDK は、ExtJS 4.1 に対して構築されています。彼らは Ext.Element を supportExt.overrideに変更したので、ここで少しクリーンなソリューションを実行できます (これは基本的に私が最初に投稿したものです):

Ext.override(Ext.dom.Element, {
    unselectable: function() {
        var me = this;
        me.dom.unselectable = "on";

        me.swallowEvent("selectstart", true);

        me.applyStyles([
            '-moz-user-select: none;', 
            '-khtml-user-select: none;', 
            '-webkit-touch-callout: none;', 
            '-webkit-user-select: none;', 
            '-ms-user-select: none;', 
            'user-select: none'
        ].join());

        me.addCls(Ext.baseCSSPrefix + 'unselectable');

        return me;
    },

    selectable: function() {
        var me = this;
        me.dom.unselectable = "off";
        // Prevent it from bubles up and enables it to be selectable
        me.on('selectstart', function(e) {
            e.stopPropagation();
            return true;
        });

        me.applyStyles([
            '-moz-user-select: text;', 
            '-khtml-user-select: text;', 
            '-webkit-touch-callout: text;', 
            '-webkit-user-select: text;', 
            '-ms-user-select: text;', 
            'user-select: text'
        ].join());

        me.removeCls(Ext.baseCSSPrefix + 'unselectable');
        return me;
    }
 });

どちらの場合も、関数を少し調整して、Webkit、IE などのスタイルも追加します。

于 2012-08-20T17:07:47.403 に答える