在输入字段中按箭头键时禁用默认浏览器行为以向右或向左移动光标
我正在使用 Firefox 来执行此操作,但它可以在 IE6 中运行......想想吧。
基本上,我编写了使用箭头键遍历输入元素网格的代码。所有这些都工作得很好。我可以使用箭头键自由移动到任何字段。当我使用向上或向下箭头时,选择功能似乎可以通过选择下一个字段中的所有文本来正常工作。 (期望的结果)
document.getElementById(id).select();
然而,当我向左或向右遍历时,文本似乎使用默认浏览器功能在选择发生后将光标向左或向右移动一次,迫使用户再次选择所有文本(不期望的结果)。
有没有办法在 Firefox 中禁用它,以便正确选择我的文本?我的用户的典型工作流程是只需按箭头键,然后开始输入数字......然后重复。
I am using Firefox to do this but it works in IE6 ... go figure.
Basically I have code written to traverse a grid of input elements using arrow keys. All of that is working just fine. I can move freely to any field using the arrow keys. When I use up or down arrows the select function seems to work correctly by selecting all text in the next field. (desired result)
document.getElementById(id).select();
However when I traverse left or right the text seems to be using a default browser function to move the cursor once to the left or right after the select happens forcing the user to select all the text again (undesired result).
Is there a way to disable that in firefox so my text gets selected correctly? The typical workflow for my users is to just hit the arrow key then start typing numbers ...then repeat.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我想说这种行为是由 keyup 事件引起的。你有尝试阻止吗?
编辑:是的,取消 keyup 事件时工作正常:http://jsfiddle。网/D6ANY/1/
I'd say this behavior is caused by the keyup event. Did you try to stop it?
edit: yep, works fine when keyup event is cancelled : http://jsfiddle.net/D6ANY/1/
从您的描述来看,在我看来您正在尝试实现类似“电子表格”的效果。如果是这样,那么您正在实施的行为可能会让用户感到困惑。例如,在电子表格中,每个单元格的选择将通过箭头键移动,但如果您必须编辑单元格,则需要按回车键。这使得它可编辑,然后再次按 Enter 键将使其变为只读
From your description, it seems to me that you are trying to achieve a "spreadsheet" like effect. If thats the case, then the behaviour you are implementing could confuse users. e.g. in spread sheets the selection moves with arrow keys for each cell but if you have to edit a cell, you need to hit the enter key. That makes it editable and then hitting the enter key again will make it read-only