添加将 Excel 数据粘贴到 Django 表单中的功能

Question

我目前有一个 Django 表单，它有 N 行 x 12 列的表格形状的文本框。用户可以一次在此表单中填充一个文本框：

[________][________][________][________][________][________][________][________][________][________][________][________][________][________][________][________ ][________][________][________][________][________][________][________][________][________][________][________]

注意：这个表只显示了 9 列，但我使用的实际表格是 12。

我想为用户添加在 Excel 中复制一系列单元格并粘贴到填写相应单元格的表单中的功能。

我试图模仿我成功创建的方法的语法，该方法能够在单击表单上的清除按钮后清除所有数据字段：

$(document).on("click", "#clear_button", function() {
    $("input[type=text]").val("");
});

来自 Excel 的单行数据是用制表符分隔的，这大约是我所得到的：

$(document).on("paste", "input[type=text]", function(){
    var input_id = $(this).attr("id");
    var value = $(this).val();
    var value_split_array = value.split("\t");
    var row_selected = input_id.match(/([-\w]+)_\d+/)[1];
    var num = parseInt(input_id.match(/[-\w]+_(\d+)/)[1], 10);
    for (i=num; i < value_split_array.length-1 || i < 12; i++) {
        $("[id="+row_selected+"_"+i+"]").val(value_split_array[i-num]);
    }
});

我认为这会起作用，但不幸的是它没有。想知道是否有人有任何建议。

Answer 1

粘贴事件在数据粘贴到输入字段之前触发，因此您无法使用$(this).val() 获取粘贴的文本。您需要访问事件对象的 clipboardData 属性。

由于 jQuery 在其事件对象中不包含 clipboardData，因此您需要从 originalEvent 字段中获取。

您的事件处理程序将如下所示。

function (event) {
    var input_id = $(this).attr("id");
    var value;
    if (event.originalEvent.clipboardData) { // Firefox, Chrome, etc.
        value = event.originalEvent.clipboardData.getData('text/plain');
    } else if (window.clipboardData) { // IE
        value = window.clipboardData.getData("Text")
    } else {
        // clipboard is not available in this browser
        return;
    }
    /* ... */
    event.preventDefault(); // prevent the original paste
}

为了更加健壮，您应该在继续之前查询 clipboardData 以确保它具有文本/纯文本表示。

在 IE 中，looks like 这就是你阅读剪贴板的方式。

var value = window.clipboardData.getData("Text");