谷歌电子表格如何检测单元格点击而不改变焦点
how does google spread sheets detect cell clicks without changing focus
我正在制作我自己的基于web的电子表格。我让它检测公式和其他单元格引用。我要做的下一步是…
当我的功能栏处于活动状态(处于焦点中)时,如果我的第一个字符是等号,并且我单击另一个单元格,我希望能够检测到该单元格,然后返回到公式栏并插入该单元格位置。
我遇到的问题是弄清楚如何跟踪从公式栏到单元格的运动,而没有单元格获得焦点。剩下的我就没意见了。我在JavaScript中做了大部分,并使用了相当一部分jQuery。我只是还没想好要跟踪哪些事件。
举个例子,我正在开发的网站被锁定了,但是制作一个谷歌电子表格,甚至使用Excel,你应该看到我正在谈论的例子。
公式栏是一个文本输入,所有的单元格都在一个表格中,并且是文本输入。
使用"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>
嗨,这是一个关于如何做到这一点的例子,使用focusOut和by和focus,如果公式文本框以"="开头,那么你可以添加单元格坐标并将焦点返回到公式文本框,如果你点击Enter,公式完成,你可以保存它或其他任何东西。
<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>
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 使用点击事件来改变“;焦点”;
- TinyMCE:可以'焦点改变后,不要在mac上写特殊字符
- JQuery . .改变焦点悬停状态&限制键盘导航选项卡区域
- 输入类型按钮,以改变焦点的输入按
- 即使在javascript中设置了焦点之后,Tab事件也会改变焦点
- 如何以编程方式改变NVD3折线图的取景器(焦点图)
- 如何在JS中检测焦点改变事件
- 如何改变焦点的网页加载在javascript的flash游戏
- 在一个溢出:隐藏的包含元素上改变焦点,移动它,但造成不明显的差异
- 关于文本输入焦点值的改变
- CSS选择器问题,如何改变父li的字体颜色时,子ul的焦点
- HTML5 INPUT type='-区分焦点和值改变鼠标点击
- 如何改变jsp's <表单的焦点:input />通过JavaScript与条形码阅读器
- 谷歌电子表格如何检测单元格点击而不改变焦点
- 扫描数据到mvc web应用程序,然后改变焦点
- 使用setTimout根据用户改变刷新计时器的问题's的焦点
- 我如何使对话框聊天日志滚动到底部不断刷新而不改变鼠标焦点
- Jquery改变焦点输入
- 三个ejs改变相机的旋转焦点