如何在输入框中查找最后一个字母的绝对或相对位置？

Question

也许这是一个奇怪的问题。请查看下方，您将会明白。

空输入框类型文本，宽度为200像素:

[____________________________]

填写了输入类型文本，宽度为200px：

[abcdefg_____________________]

如果输入框左边距离为0，如何找到字母“g”的绝对位置或相对位置？

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

- gadlol

---

我认为这是不可能的。你可以通过将字体大小乘以字母数量来近似... - mikeycgto

我喜欢Steven Dickinson的提议...使用span。但是我必须在输入和span上设置相同的字体大小和字体系列。 - gadlol

Answer 1

文本大小调整的方法是可行的，但您也可以使用一个visibility: hidden的span来移动信息div。HTML代码如下：

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

这样，您就可以依赖浏览器将同一字体以大致相同的方式呈现到一个中。

- Steven Dickinson

---

我是这样做的，它运行良好。虽然我必须为输入和隐藏的span设置相同的字体大小和字体系列。还需要在按退格键和删除键时进行一些微小的更正。 - gadlol

需要进行一些微调以确保正确性，但仍然非常不错。 - tybro0103

Answer 2

我只能想到一种可靠的方法来实现这个，而且这种方法相当不好。

1）使用一个左浮动的可编辑div： 2）将该div与另一个带有200宽度、边框和onclick设置为可编辑div的包围在周围的div 3）将您想要显示的div放在可编辑div后的最后一个字母之后，也左浮动。

结果： http://jsfiddle.net/tybro0103/zMezP/1/ 点击框并开始输入。绿色框将随光标位置移动。

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

- tybro0103

---

里面有一点JS，但我也给加1。它比我想出来的要简洁得多。 - tjm

顺便提一下，我使用了 jQuery（而不是普通的 JavaScript）来专注于可编辑的 div。当然，您需要调整 CSS 以适应您的需求。FYI。 - tybro0103

哦，原来是这样。还不错呢。楼主应该采用这个方案。@楼主 - 设置相对定位以使光标在正确的位置。顺便接受一些答案吧... - Bosworth99

Answer 3

很遗憾，没有内置的“textWidth”参数。但是，有一个相当不错的技巧：您可以计算字符数，猜测它们的宽度，并将您的div“left”参数设置为字符数*宽度（并确保其绝对定位）。类似这样：

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动画到目标位置，你就可以开始工作了。

希望这有所帮助。

请注意 - 这仅适用于字体是等宽字体且用户不修改字体大小的情况。

- Bosworth99

---

只有当字体是等宽字体时，那才能正常工作，但通常情况下并非如此。W占用的空间比i多：WWWWWWWWWW iiiiiiiiii 即使字体是等宽字体，用户也可以调整浏览器字体大小。 - tybro0103

是的 = 光标很容易失去同步。顺便说一下，你的解决方案似乎相当可靠。 - Bosworth99

什么？没有textWidth参数？只是说一下会很好（其他语言/平台中存在这样的东西）... - Bosworth99

Answer 4

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

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

现在，您可以将与目标 div 长度相等的空格数前置。

- nikhil

Answer 5

受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 何时触发，这是一个问题。您可以通过引入超时或可能有更好的解决方案来解决它。不幸的是，在 Firefox 5 中，keyup 事件似乎无法在 contentEditable 上工作。

希望这可以帮助到您。

- tjm

Answer 6

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

或者，在一个display:none的div中创建一个带有maxlength属性的输入框，该属性设置为当前输入中的字符数。然后获取它的宽度。

- David Laberge

Answer 7

1. 将字体大小设置为输入
2. 使用文本创建输入的屏幕截图，并查看每个符号所使用的像素数量（平均值）
3. 计算符号数*1个符号的平均宽度+输入左填充=您想要的结果 :) 简单解决方案

- korywka