Failed to read the 'selectionStart' property from 'HTMLInputElement':

Question

I'm using binding handler.if i remove this code my code is saved.but if i use this code it will throw error.

Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('checkbox') does not support selection.

 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

You have an input element of type="checkbox" in your HTML, where the Javascript code expects a type="text".

A checkbox has no text, thus it cannot have any selection. But your code tries to access the non-existent property selectionStart.

Please have a look at https://jsfiddle.net/u99f0q1j/ to see the issue demonstrated.

As you did not post your HTML, it is hard to see what is causing the error.

But in your browser dev tools, you should be able to click on the line number next to your "Uncaught InvalidStateError" message in order to see the Javascript line that tried to access the selectionStart property on your checkbox.

Answer 2

There are some DOM elements whose value cannot be obtained by using jQuery's .val() or the DOM's .value. One example is the HTML5 number field; another is the checkbox.

I'm not certain where this exception is occurring - you can easily find out by commenting-out lines in your binding handler and using trial-and-error. I could copy your binding handler into a test page but I don't know what HTML you're binding it to. However, I suspect you'll find that you have to do some element-type checking, and implement different logic for different types of DOM element.

My suggestion would be to change your init function to

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

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

Verify that this doesn't throw an exception, then gradually uncomment the remaining script, block by block, reloading your page after each modification until you find the cause of the exception.

Answer 3

$.ajax({
        processData: false,
        contentType: false,
        type:"POST",

add processData =false and contentType = false. This works for me.