Question

也许这是一个奇怪的问题。拜托Bellow，你会明白的。

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

[____________________________]

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

[abcdefg_____________________]

如果输入左边是0，如何找到g字母为???的绝对或相对位置

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

Answer 1

文本大小的黑客攻击是可以的，但你也可以使用visiblity：隐藏的跨度来移动你的信息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>

通过这种方式，您可以依赖浏览器以相同的方式将相同的字体呈现为跨度。

Answer 2

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

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

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

单击该框并开始输入。绿色框将随光标位置一起移动。

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

Answer 3

遗憾的是，没有内置的“textWidth”参数。然而，一个非常好的hack：你可以计算字符，猜测它们的宽度，并设置你的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动画到目标位置），您应该开始营业。

希望有所帮助。

如上所述 - 这只有在字体是等宽字体并且用户根本不修改字体大小时才有效。

Answer 4

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

或者

显示中的

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

Answer 5

设置字体大小以输入
使用文字制作输入屏幕截图，并查看1个符号（平均值）使用了多少px
计算symblos *平均宽度1 +输入左边填充=你想要的:) 简单的解决方案

Answer 6

我不确定这个问题，但在我看来，你可以这样做：

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

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

Answer 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中）。

希望这有帮助。

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

7 个答案: