谷歌电子表格如何在不改变焦点的情况下检测单元格点击答案

【问题标题】：how does google spread sheets detect cell clicks without changing focus谷歌电子表格如何在不改变焦点的情况下检测单元格点击
【发布时间】：2013-03-15 20:29:12
【问题描述】：

我正在开发自己的基于网络的电子表格。我让它检测公式和其他单元格引用。我想做的下一步是......

虽然我的功能栏处于活动状态（焦点），但如果我的第一个字符是等号，并且我单击另一个单元格，我希望能够检测到该单元格然后返回到编辑栏并插入该单元格位置。

我遇到的问题是弄清楚如何跟踪从编辑栏到单元格的移动，而不让单元格获得焦点。剩下的我不会有问题。我在 JavaScript 中完成了大部分工作，并使用了相当多的 jQuery。我只是还没弄清楚要跟踪哪些事件。

至于示例，我正在开发的网站已被锁定以进行开发，但制作 Google 电子表格甚至使用 Excel，您应该看到我正在谈论的示例。

编辑栏是文本输入，所有单元格都在一个表格中，都是文本输入。

【问题讨论】：

所以这确实把我带到了另一个我没有想到的情况。我需要更广泛的方式来跟踪点击次数，例如我在哪里以及我来自哪里。例如，如果我在编辑栏中单击一个单元格，并且编辑栏正在编写一个函数（char At 0 is '='），那么我想获取我单击的单元格并将其附加到编辑栏.但我还需要一种方法来单击公式栏，以便我可以从其他单元格中工作。为什么谷歌必须让这一切看起来如此简单？

标签： javascript jquery google-sheets

【解决方案1】：

使用“mousedown”事件并防止立即传播。这应该可以防止焦点发生，允许您引用文本输入但不向其发送焦点。

$(".cell input[type=text]").mousedown(function(event){

    if($("#formulaBar").val()[0] == "+"){

        event.stopImmediatePropagation();

        var cell = $(this).parent();
        var row = cell.attr("data-row");
        var col = cell.attr("data-column");

        //Do something with the formula bar
    }

});

我假设 HTML 标记是这样的：

<td data-row="0" data-column="0">
    <input type="text" />
</td>

【讨论】：

回答了一半，在这种情况下，我如何检测到我来自公式栏？我还没有看到 .stopImmediatePropagation() 函数，所以我现在也在检查它。

【解决方案2】：

嗨，这是一个关于如何做到这一点的示例，使用 focusOut 和 by 和焦点，如果公式文本框以“=”开头，那么您可以添加单元格坐标并将焦点返回到公式文本框，如果您单击在输入公式完成后，您可以保存它或其他任何内容。

<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    </head>
    <body>
    <input type="text" id="txtFormular" style="width:100%"/>
    <br />
    <input type="text"  id="txtCell1" Coord="A1"  style="width:50px"/>
    <input type="text"  id="txtCell2" Coord="A2" style="width:50px"/> 
    <input type="text"  id="txtCell3" Coord="A3" style="width:50px"/>
    <input type="text"  id="txtCell4" Coord="A4" style="width:50px"/>
    <input type="text"  id="txtCell5" Coord="A5" style="width:50px"/>
    <input type="text"  id="txtCell6" Coord="A6" style="width:50px"/>
    <input type="text"  id="txtCell7" Coord="A7" style="width:50px"/>
    <script>
    $(function(){
        var formulaOn = false;
        $("#txtFormular").focusout(function(){
        if(this.value.indexOf("=") == 0)
        formulaOn = true
        else
        formulaOn = false;
        });
        $('#txtFormular').keypress(function (e) {
          if (e.which == 13) {
            //Save you formula
            this.value = "";
            this.blur();
          }
        });
        $("input[id^='txtCell']").focus(function(){
            if(formulaOn)
            {
                var txtFormulaVal = $("#txtFormular").val();
                $("#txtFormular").val(txtFormulaVal +$(this).attr("Coord"));
                $("#txtFormular").focus();
            }
        });
    });
    </script>
    </body>
    </html>

【讨论】：

这看起来可以。谢谢！