2016-09-15 7 views
0

現在、document.execCommand()を使用してcontenteditable divにテキストをスタイル設定しています。 JqueryUIアコーディオンに制御要素を配置したいのですが、選択メニューでは不思議な動作です。JqueryUI AccordionをクリックしないようにするContenteditable Divでテキストを選択解除する

私のselect要素はJqueryUIアコーディオンのペインに配置されているため、mousedownイベントが発生すると、contenteditableフィールドの選択されたテキストは選択解除されます。 select要素の最初のヒット後にmousedownイベントの宣言を無効/ブロックする方法はありますか?または、重要なことに、選択メニューをクリックして、コンテンツ編集可能テキストのテキストが選択解除される前に、document.execCommand()を選択要素のonchangeイベントで発生させるアイテムを選択する方法はありますか?

私は以下を試しましたが、選択メニューも開かなくなりました。 #propertiesPanelは、選択メニューが配置されている実際のアコーディオンペインです。

また、ペインはすでに開いています。私はcontenteditable divでテキストを選択していますが、select要素をクリックしてテキストサイズを変更(例として)しようとしています。 JqueryUIアコーディオンが使用されていない場合、まったく同じプロシージャはテキストの選択を解除しません。

$('#propertiesPanel').mousedown(
    function(event){ 
     event.preventDefault(); 
    } 
); 

上記の単純なstopPropegationバージョンは、まったく何もしません。

$('#propertiesPanel').mousedown(
    function(event){ 
     event.stopPropagation(); 
     event.stopImmediatePropagation(); 
    } 
); 

はまた、私はこれを試み、それが動作しませんが、おそらくこれは、イベントを変更するよりも許容できるアプローチですか?

$("#propertiesPanel").children().css({userSelect: 'none'}); 

もう1つのアプローチは、パネル全体でreturn falseを使用しています。テキストの選択を解除しませんが、select要素をドロップダウンすることはできません。

$('#propertiesPanel').mousedown(function(){ 
    return false; 
}); 

答えて

0

は、あなたが解決策を見つけることになった

$(".something").click(function() { 
    $("input.whatever").focus(); 
}); 
+0

この状況でどのように動作するのか説明できますか?これは、コンテンツ編集可能なdivからテキストを選択解除するので、アイデアはフォーカスを変更することではありません。 – user1145643

0

、のようなものを使用しようとしました。それはかなり重い解決策ですが、ランジープラグインを使用してクロスブラウザで動作するようです。私は実際onchangeイベントにちょうどdocument.execCommand前に、マウスダウン& restoreSelection()saveSelection()を呼び出す

https://github.com/timdown/rangy

var savedSel = null; 
    function saveSelection() { 
     if (savedSel) { 
      rangy.removeMarkers(savedSel); 
     } 
     savedSel = rangy.saveSelection(); 
    } 
    function restoreSelection() { 
     if (savedSel) { 
      rangy.restoreSelection(savedSel, true); 
      savedSel = null; 
     } 
    } 
    window.onload = function() { 
     // Turn multiple selections on in IE 
     try { 
      document.execCommand("MultipleSelection", null, true); 
     } catch(ex) {} 
     rangy.init(); 
    } 

。私はこの質問を、より明るく洗練されたソリューションを持っている誰かのために開いておきます。

関連する問題