Fehler beim Lesen der 'selectionStart'-Eigenschaft von' HTMLInputElement ':

Question

Ich benutze binding handler.wenn ich diesen Code entferne, wird mein Code gespeichert. Aber wenn ich diesen Code verwende, wird der Fehler ausgegeben.

Uncaught InvalidStateError: Fehler beim Lesen der Eigenschaft 'selectionStart' von 'HTMLInputElement': Der Typ des Eingabeelements ('checkbox') unterstützt keine Auswahl.

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

Es gibt einige DOM-Elemente, deren Wert kann nicht mit jQuery .val() oder die DOM .value erhalten werden. Ein Beispiel ist das Feld HTML5 number; ein anderes ist das Kontrollkästchen.

Ich bin mir nicht sicher wo diese Ausnahme auftritt - Sie können leicht herausfinden, indem Sie Zeilen in Ihrem Bindungshandler auskommentieren und Trial-and-Error verwenden. Ich könnte Ihren Binding-Handler in eine Testseite kopieren, aber ich weiß nicht, an welchen HTML-Code Sie ihn binden. Ich vermute jedoch, dass Sie feststellen müssen, dass Sie eine Überprüfung des Elementtyps durchführen und unterschiedliche Logik für verschiedene Arten von DOM-Elementen implementieren müssen.

Mein Vorschlag wäre Ihre init Funktion

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

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

ändern Stellen Sie sicher, dass diese keine Ausnahme werfen, dann nach und nach Kommentar- dem verbleibenden Skript, Block für Block, um Ihre Seite nach jeder Änderung neu geladen bis Sie die Ursache der Ausnahme finden.

Answer 2

Sie haben ein input Element von type="checkbox" in Ihrem HTML, wo der Javascript-Code eine type="text" erwartet.

Ein checkbox hat keinen Text, daher kann er keine Auswahl haben. Ihr Code versucht jedoch, auf die nicht vorhandene Eigenschaft selectionStart zuzugreifen.

Bitte sehen Sie sich https://jsfiddle.net/u99f0q1j/ an, um das Problem zu sehen.

Da Sie Ihren HTML-Code nicht veröffentlicht haben, ist es schwer zu erkennen, was den Fehler verursacht.

Aber in Ihrem Browser Dev Tools sollten Sie in der Lage sein, auf die Zeilennummer neben Ihrer "Uncaught InvalidStateError" Nachricht zu klicken, um die Javascript-Zeile zu sehen, die versucht, auf die selectionStart Eigenschaft auf Ihrem Kontrollkästchen zuzugreifen.