Yakalanmamış IndexSizeError: 'Seçim' için 'getRangeAt' yürütülemedi: 0 geçerli bir dizin değil

Question

Burada sorun nedir?

Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

Answer 1

sorun WebKit özgü gibi görünüyor;:

if (window.getSelection()) 
    EditField = window.getSelection().getRangeAt(0); 

hata atar IE veya Firefox'ta üretemedim.

Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index

Safari, aynı sorunu var, ancak ileti farklıdır: OP önce de belirtildiği gibi, Google Chrome hatadır

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Tipik basit WYSIWYG editörleri olur. Örnek:

<form name="frm"> 
 
    <div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;"> 
 
    Text inside my editor. 
 
    </div> 
 
    Click this button to insert some text into the text editor: 
 
    <button type="button" onclick="doInsert('TEST');">Insert</button> 
 
    </form> 
 
    <script> 
 
    function doInsert(text) { 
 
     var sel = window.getSelection && window.getSelection(); 
 
     if (sel) { 
 
      var range = sel.getRangeAt(0);    // error here 
 
      var node = document.createTextNode(text); 
 
      range.deleteContents(); 
 
      range.insertNode(node); 
 
     } 
 
    } 
 
    </script>

sayfa yüklendikten sonra

, düğmesine tıklayın; JavaScript konsolunda (Chrome) veya hata konsolunda (Safari) hata mesajını göreceksiniz. Ancak, editör bölümü içinde herhangi bir yeri tıklatırsanız, düğmeyi tıklatırsanız oluşur.

Bu sorunun önlenmesi kolaydır; hep getRangeAt çağırmadan önce rangeCount kontrol: Elbette

function doInsert(text) { 
    var sel = window.getSelection && window.getSelection(); 
    if (sel && sel.rangeCount > 0) { 
     var range = sel.getRangeAt(0); 
     ... 

, sen sayfa yüklenirken (yöntemiyle focus ile) editör odak vererek durumu önleyebilirsiniz. Bununla birlikte, editörünüzün daha sonra seçim aralığını kaybetmesine neden olan nadir olaylar vardır. Şimdiye kadar, sadece bir çoklu seçim liste kontrolü ile bu çoğaltmak mümkün olmuştur:

<form name="frm"> 
 
    <div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;"> 
 
    Click to position the caret anywhere inside this editor section. 
 
    </div> 
 
    Next, select an item from this list: 
 
    <select id="insertables" multiple="multiple"> 
 
    <option>foo</option> 
 
    <option>bar</option> 
 
    <option>baz</option> 
 
    </select> 
 
    <br />Finally, click this button to insert the list item into the text editor: 
 
    <button type="button" onclick="doInsert(frm.insertables.value);">Insert</button> 
 
</form> 
 
<script> 
 
    function doInsert(text) { 
 
    var sel = window.getSelection && window.getSelection(); 
 
    if (sel) { 
 
     var range = sel.getRangeAt(0); // error here 
 
     var node = document.createTextNode(text); 
 
     range.deleteContents(); 
 
     range.insertNode(node); 
 
    } 
 
    } 
 
</script>

Yine, rangeCount kontrol ederek hatasını önleyebilir. Ama sorun şu ki, butonum, seçilen liste maddesini, yapılması gereken en son bilinen koruma pozisyonuna eklemiyor. Yöntem focus yardımcı olmuyor; düzeltme yapısını, editördeki sol üst konuma sıfırlar. düğme tıklandığında

var savedRange = null; 

document.addEventListener("selectionchange", HandleSelectionChange, false); 

function HandleSelectionChange() { 
    var sel = window.getSelection && window.getSelection(); 
    if (sel && sel.rangeCount > 0) { 
     savedRange = sel.getRangeAt(0); 
    } 
} 

Ve geri:

bir çözüm sürekli (Bu amaçla, tuzak olay SelectionChange için) geçerli seçim aralığını kurtarmaktır

function doInsert(text) { 
    var sel = window.getSelection && window.getSelection(); 
    if (sel && sel.rangeCount == 0 && savedRange != null) { 
     sel.addRange(savedRange); 
    } 
    if (sel && sel.rangeCount > 0) { 
     var range = sel.getRangeAt(0); 
     var node = document.createTextNode(text); 
     range.deleteContents(); 
     range.insertNode(node); 
    } 
} 

Fiddle: http://jsfiddle.net/stXDu/

Answer 2

Göz önünde bulundurulması gereken bir şey var: engelli seçiminiz var kodunun bir yerinde mi?Eğer öyleyse, bazı durumlarda 'u tercih edebilirsiniz, menzili almadan önce elemanınıza (NB!) Elemanınıza odaklanmadan önce, tercihan bir mousedown etkinliğinde veya seçimini olarak etkinleştirin. Bunu yapmak benim problemimi çözdü.

$('#MyEditableDiv').on('mousedown', function (e) { 

    $(document).enableSelection(); 


}); 

Answer 3

Projemde

önce ekleme iframe

pencere olarak bir şeyler her zaman editwin set WYSIWYG editörü olarak

kullanım iframe bazı çözüm editöre kodla, önce aşağıdaki kodu kullanmalısınız. editör olarak

editwin.focus(); 
editwin.document.body.focus(); 

kullanım textarea

aynı şekilde yukarı gibi textarea dom, ancak farklı kod

textobj.focus();