如何在输入字段中找到最后一个字母的绝对或相对位置？答案

【问题标题】：How to find absolute or relative position of last letter inside an input field?如何在输入字段中找到最后一个字母的绝对或相对位置？
【发布时间】：2011-06-30 14:14:43
【问题描述】：

也许这是一个奇怪的问题。请检查一下你会明白的。

空输入类型文字，宽度=200px：

[____________________________]

填充输入类型文本，宽度=200px：

[abcdefg_____________________]

如果输入left为0，如何求g字母所在的绝对或相对位置？？？

当用户输入一些文本时，我想在最后一个字母下显示一个简单的 div...

【问题讨论】：

我认为这是不可能的。您可以通过将字体大小乘以字母数量来近似它...
我喜欢 Steven Dickinson 的提议……有跨度。但我必须在输入和跨度上设置相同的字体大小和字体 mfamily。

标签： javascript jquery html input position

【解决方案1】：

文本大小 hack 是可以的，但您也可以使用 visiblity: hidden span 来移动您的信息 div。 HTML sn-p 如下：

<div><input type="text" value="hgello!!" onkeydown="document.getElementById('spacer').innerHTML = this.value;" /></div>
<div><span id="spacer" style="visibility: hidden;"></span>Character</div>

通过这种方式，您可以依靠浏览器以大致相同的方式将相同的字体渲染到一个跨度中。

【讨论】：

我是这样做的并且工作正常。虽然我必须为输入和隐藏跨度设置相同的字体大小和字体系列。在点击退格键和删除键时也进行了一些微调。
需要一些调整才能让它正确，但仍然非常好。

【解决方案2】：

我只能想到一种可靠的方法来做到这一点，而且很脏。

1) 使用内容可编辑的 div 向左浮动： 2) 用另一个宽度为 200 的 div 包围该 div，边框和 onlick 将焦点设置为可编辑的 div 3) 将要显示的 div 放在可编辑 div 之后的最后一个字母之后，也向左浮动

结果： http://jsfiddle.net/tybro0103/zMezP/1/

单击该框并开始输入。绿色框会随着光标位置移动。

为了将其用作表单中的文本字段，您需要创建一个隐藏的输入字段。在表单提交时，将隐藏字段的值设置为可编辑 div 的内部 html。

【讨论】：

里面有一点 JS，但我也仍然 +1。这比我想出的要简洁得多。
顺便说一句，我应该提到我使用 jquery（而不是普通的 javascript）来关注 contenteditable div。当然，你需要 tweek css 来满足你的需求。仅供参考
哦，原来如此。仍然，工作得很好。 OP应该和这个一起去。 @OP - 设置相对定位以使光标位于正确的位置。并接受一些答案，而你的...

【解决方案3】：

遗憾的是，没有内置的“textWidth”参数。然而，一个非常有效的技巧：您可以计算字符，猜测它们的宽度，并将您的 div“左”参数设置为等于字符数 * 宽度（并确保其绝对定位）。类似：

var characterWidth = 6.8; //have to guess at this until it works...
var targetLocation = document.getElementById('yourInput').value.length * characterWidth;
document.getElementById('yourDiv').style.left = targetLocation + "px";

在计时器上运行此脚本，每半秒左右一次（或使用 jquery 动画到目标位置），您应该开始工作了。

希望对您有所帮助。

如前所述 - 这仅适用于等宽字体且用户根本不修改字体大小的情况。

【讨论】：

只有当字体是等宽字体时才有效，通常情况并非如此。 W 比 i 占用更多空间 WWWWWWWWWW iiiiiiiiii 即使字体是等宽字体，用户也可以让浏览器调整字体。
是的 = 光标很容易不同步。顺便说一句，您的解决方案似乎很可靠。
什么？没有 textWidth 参数。只是说会很好（其他语言/平台中确实存在这样的事情）......

【解决方案4】：

我知道如何做到这一点的唯一方法是计算一个字母的宽度，然后将其乘以您输入的字母数。

或者

在一个 display:none div 中创建一个输入宽度 maxlength 属性为当前输入中的字符数。然后得到它的宽度。

【讨论】：

【解决方案5】：

设置输入字体大小
用文本截取输入内容，查看 1 个符号使用了多少像素（平均）
计数符号 * 1 的平均宽度 + 输入左填充 = 你想要的 :) 简单的解决方案

【讨论】：

【解决方案6】：

我不太确定这个问题，但我认为你可以这样做：

var len = 0;
$(document).ready(function(){
    len = $('#input').val().length;
 }

现在您可以在目标 div 中添加等于长度的空白数。

【讨论】：

【解决方案7】：

受 tybro 回答的启发，我想出了这个，它解决了您问题中的一个问题。如果文本框是固定长度的，如果最后一个字母根本不可见怎么办？那么应该报告什么坐标呢？无论如何，这可以通过无限扩展文本框来解决。

// markup
<div id="textbox">
    <span id="edit" contentEditable></span>
    <span id="end"></span>
</div>
<div id="report">x:? , y:?</div>


// css
#textbox {
    border: solid black 1px;
    min-height: 1em;
    white-space: nowrap;
}


// javascript
$(function() {
    $('#textbox').click(function() {
         $('#edit').focus();
    });

    $('#edit').keypress(function() {
        var endoff = $('#end').offset();
        $('#report').html('x:' + endoff.left + ' , y:' + endoff.top);
    });
});

我唯一不确定的是keypress 何时触发，如果它是在内容更改之前，那是个问题。您可以通过引入超时来解决它，或者可能有更好的解决方案。不幸的是，keyup 事件似乎不适用于contentEditable 事物（无论如何在 Firefox 5 中）。

希望这会有所帮助。

【讨论】：