Impossibile leggere la proprietà 'selectionStart' da 'HTMLInputElement':

Question

Sto utilizzando binding handler.if rimuovo questo codice il mio codice è salvato.ma se uso questo codice genererà un errore.

Uncaught InvalidStateError: Impossibile leggere la proprietà 'selectionStart' da 'HTMLInputElement': il tipo di elemento di input ('checkbox') non supporta la selezione.

ko.bindingHandlers.wysiwyg = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      debugger; 
      var options = allBindingsAccessor().wysiwygOptions || {}; 
      var value = ko.utils.unwrapObservable(valueAccessor()); 

        //value = value.text(); 
      //var v = value[0].childNodes[0].data; 
      var $e = $(element); 

      $.extend(true, { 
       initialContent: value 
      }, options); 

      $e.wysiwyg(options); 

      //handle the field changing 
      function detectFn() { 
       var observable = valueAccessor(); 
       var newvalue = $e.wysiwyg("getContent"); 
       observable(newvalue); 
      } 

      var current = $e.wysiwyg('document'); 
      var timer; 
      current.bind({ 
       keyup: function() { 
        clearTimeout(timer); 
        timer = setTimeout(detectFn, 1000); 
       } 
      }); 

      //handle disposal (if KO removes by the template binding) 
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
       $e.wysiwyg('destroy'); 
      }); 


     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 

      $(element).wysiwyg("setContent", value); 
      ko.bindingHandlers.value.update(element, valueAccessor); 
     } 
    }; 

Answer 1

Ci sono alcuni elementi DOM cui valore non può essere ottenuto utilizzando del .val() jQuery o DOM del .value. Un esempio è il campo HTML5 number; un'altra è la casella di controllo.

Non sono sicuro dello dove si è verificata questa eccezione: è possibile individuare facilmente le righe di commento nel gestore di binding e l'utilizzo di tentativi ed errori. Potrei copiare il tuo gestore di binding in una pagina di test ma non so a quale codice HTML stai vincolando. Tuttavia, ho il sospetto che scoprirai che devi eseguire alcuni controlli di tipo elemento e implementare logiche diverse per diversi tipi di elementi DOM.

Il mio suggerimento sarebbe quello di cambiare la vostra funzione init a

init: function(element, valueAccessor, allBindingsAccessor) { 
    var options = allBindingsAccessor().wysiwygOptions || {}, 
     value = ko.utils.unwrapObservable(valueAccessor()); 

    /* 
     the rest of your init function, commented-out 
    */ 
} 

Verificare che questo non gettare un'eccezione, poi gradualmente togliere il commento alla sceneggiatura rimanente, blocco per blocco, ricaricare la pagina dopo ogni modifica finché non trovi la causa dell'eccezione.

Answer 2

Hai un elemento input di type="checkbox" nel codice HTML, dove il codice JavaScript prevede un type="text".

A checkbox non ha testo, quindi non può avere alcuna selezione. Ma il tuo codice tenta di accedere alla proprietà inesistente selectionStart.

Si prega di dare un'occhiata a https://jsfiddle.net/u99f0q1j/ per vedere il problema dimostrato.

Dato che non hai inserito il codice HTML, è difficile vedere quale causa l'errore.

Ma negli strumenti dev del browser, dovresti essere in grado di fare clic sul numero di riga accanto al messaggio "Uncaught InvalidStateError" per visualizzare la riga Javascript che ha tentato di accedere alla proprietà selectionStart sulla casella di controllo.