JS jquery rangeError - 超出最大调用堆栈大小

Question

任何人都能告诉我以下JS错误的含义吗？

一切运作良好。

我认为这可能是因为这个JS代码段：

                <!--move cursor to the end of input value-->
                <script>
                    $(document).ready(function () {
                        jQuery.fn.putCursorAtEnd = function () {
                            return this.each(function () {
                                // Cache references
                                var $el = $(this),
                                    el = this;
                                // Only focus if input isn't already
                                if (!$el.is(":focus")) {
                                    $el.focus();
                                }
                                // If this function exists... (IE 9+)
                                if (el.setSelectionRange) {
                                    // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
                                    var len = $el.val().length * 2;
                                    // Timeout seems to be required for Blink
                                    setTimeout(function () {
                                        el.setSelectionRange(len, len);
                                    }, 1);
                                } else {
                                    // As a fallback, replace the contents with itself
                                    // Doesn't work in Chrome, but Chrome supports setSelectionRange
                                    $el.val($el.val());
                                }
                                // Scroll to the bottom, in case we're in a tall textarea
                                // (Necessary for Firefox and Chrome)
                                this.scrollTop = 999999;
                            });

                        };

                        (function () {
                            var searchInput = $(".js-typeahead");
                            searchInput
                                .putCursorAtEnd() // should be chainable
                                .on("focus", function () { // could be on any event
                                    searchInput.putCursorAtEnd()
                                });
                        })();
                    });
                </script>

Answer 1

这很可能是因为

(function () {
    var searchInput = $(".js-typeahead");
    searchInput.putCursorAtEnd().on("focus", function () { 
        searchInput.putCursorAtEnd() //you are invoking putCursorAtEnd here
    });
})();

在putCursorAtEnd中，您要重新设置元素上的focus

if (!$el.is(":focus")) {
      $el.focus();
}

导致无法结束的递归，因为在焦点处你试图重点关注它。

根据您正在尝试的操作来判断，而不是再次将事件绑定在焦点上，请执行click

(function () {
    var searchInput = $(".js-typeahead");
    searchInput.putCursorAtEnd().on("click", function () {  //focus is changed to click
        searchInput.putCursorAtEnd();
    });
})();