首页 > 解决方案 > CoffeeScript 通过 Excel 提供意外行为

问题描述

在网站上使用以下带有数据表的脚本,似乎每次从 excel 复制一个单元格时,它都会被复制为 base64 图像,从而执行 GitHub 中显示的 CoffeeScript。我将如何使它仅在选择 div 时在 imagecapture div 上执行?我现在能做的最好的事情是不执行,除非它在同一页面上,但我需要将其缩小到 div 元素。

https://gist.github.com/STRd6/5286415

<div id="imagecapture" class="span4 target contain" contenteditable="true" <?php if(!empty($ToolItems[0]->Base64)){ $Base64 = $ToolItems[0]->Base64; echo "style=\"background-image: url('$Base64')\";";}?>></div>

下面我对其进行了一些修改以选择焦点,但是当我粘贴它时,它不会像焦点包装器不在其中时那样执行帖子

$('#imagecapture').focus(function() {
(function($) {
    var defaults;
    $.event.fix = (function(originalFix) {
        return function(event) {
            event = originalFix.apply(this, arguments);
            if (event.type.indexOf("copy") === 0 || event.type.indexOf("paste") === 0) {
                event.clipboardData = event.originalEvent.clipboardData;
            }
            return event;
        };
    })($.event.fix);
    defaults = {
        callback: $.noop,
        matchType: /image.*/
    };
    return ($.fn.pasteImageReader = function(options) {
        if (typeof options === "function") {
            options = {
                callback: options
            };
        }
        options = $.extend({}, defaults, options);
        return this.each(function() {
            var $this, element;
            element = this;
            $this = $(this);
            return $this.bind("paste", function(event) {
                var clipboardData, found;
                found = false;
                clipboardData = event.clipboardData;
                return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
                    var file, reader;
                    if (found) {
                        return;
                    }
                    if (
                        type.match(options.matchType) ||
                        clipboardData.items[i].type.match(options.matchType)
                    ) {
                        file = clipboardData.items[i].getAsFile();
                        reader = new FileReader();
                        reader.onload = function(evt) {
              var dataURL = evt.target.result;

                /** Add to Database */
                var queryString = window.location.search;
                var urlParams = new URLSearchParams(queryString);
                var ToolID = urlParams.get('ToolID')
                console.log(dataURL);
                $.ajax({
                  type: "POST",
                  dataType: "json",
                  url: 'ajax/controller.php',
                  data: {
                    name: 'UpdateBaseImage',
                    UpdateBaseImage: 'True',
                    dataURL: dataURL,
                    ToolID: ToolID
                  },
                  success: function(data){
                    console.log('File Uploaded');
                  }
                });
              location.reload();
              

                            return options.callback.call(element, {
                                dataURL: evt.target.result,
                                event: evt,
                                file: file,
                                name: file.name
                            });
                        };
            reader.readAsDataURL(file);
                        return (found = true);
                    }
                });
            });
        });
    });
})(jQuery);
});```

标签: javascripthtmljquerycoffeescript

解决方案


删除了第一行和最后一行的图像捕捉焦点,而是检查了 div 周围的焦点,并将逻辑放在对控制器的调用周围,这样它就不会调用这部分函数,​​除非它被主动聚焦

          var FocusElement = document.getElementById('imagecapture');
          var isFocused = (document.activeElement === FocusElement);
          if (isFocused) {
            //CodeBlock
          }

推荐阅读