JQuery 输入焦点操作答案

【问题标题】：JQuery Input Focus ManipulationJQuery 输入焦点操作
【发布时间】：2010-06-28 14:51:57
【问题描述】：

有一个想法，现在正在努力实现它。

想法：拥有一个带有多个 CSS 输入的 HTML 页面，使其看起来像横格纸。然后在每一行的末尾将焦点从一个输入移到下一个输入，这样用户就可以在模仿横格纸的页面上继续输入。

问题：当输入到达行尾时无法检测或捕获事件，因此无法将焦点从一个字段移动到下一个字段。

我尝试在输入中使用 maxlength 属性，但这不起作用，因为当然有些字母比其他字母宽，所以这些行从未真正“填满”

可能的解决方案：将输入更改为包含文本的内部跨度的 div，在 keyup 事件上计算跨度的宽度并将其与 div 的整体宽度相匹配，如果大于修剪文本并移动文本和焦点到下一个 div。

问题在于它很混乱，并且可能会导致页面性能不佳，具体取决于我决定使用的行数。

问题：当达到可视区域的末端以触发我的功能时，我是否可以从输入中获取任何事件？或者也许有人可以更好地了解如何实现这一点？或者我是否正在尝试重新创建轮子并且已经为此编写了一些内容（我在 Google 上找不到任何内容）？？

【问题讨论】：

您是否尝试过在<textarea> 上设置背景图像？
为什么不对<textarea> 元素设置样式？您可以设置字体、line-spacing、line-height、background-image 等，它会为您处理换行。 FWIW，[element.getClientRects()](developer.mozilla.org/en/DOM:element.getClientRects) 将获取元素的文本尺寸。
文本区域的坏处是我希望能够在任何行上插入文本，但如果有意义的话，仍然可以将文本换行到下一行：-/

【解决方案1】：

每次按键触发一个函数来计算输入字段中的字符数。如果您达到极限，请将焦点移至下一行:)

【讨论】：

好吧，他已经说过只计算字符是行不通的，因为他使用的是非等宽字体。
在不使用等宽字体的情况下看不到这样做的方法...这里有一些免费使用的等宽字体，可能适用于记事本效果：fontsquirrel.com/fonts/list/style/Monospaced
老实说，我从来没有想到过等宽字体，这可能是最好的解决方案，因为我有一个已经可以工作的功能，只是间距被抬高了。谢谢！

【解决方案2】：

这是一个在文本区域使用样式的示例。也可以加载漂亮的手写字体。

【讨论】：