javascript - Failed to read the 'selectionStart' property from 'HTMLInputElement': - Stack Overf

admin管理员组

文章数量:1294760

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);
        }
    };

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);
        }
    };

• javascript
• jquery
• knockout.js
• selection-api

Share Improve this question Follow edited Nov 21, 2022 at 7:53 sideshowbarker♦ 88.3k2929 gold badges215215 silver badges212212 bronze badges asked Dec 2, 2015 at 0:58 diydiy 11911 gold badge11 silver badge1010 bronze badges 1

• Something like checkbox.selectionStart indeed used to throw an error, in Firefox too. But currently, in Firefox 62.0a1, I just get null. Did the behavior change over time? Can anyone confirm this? – Sebastian Simon Commented May 25, 2018 at 20:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/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.

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 menting-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, mented-out
    */
}

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

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

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

本文标签： javascriptFailed to read the 39selectionStart39 property from 39HTMLInputElement39Stack Overflow