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

How to find absolute or relative position of last letter inside an input field?

本文关键字：位置 相对 何找 输入 字段 最后一个      更新时间：2023-09-26

也许这是一个奇怪的问题。请检查贝娄，你会理解的。

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

[____________________________]

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

[abcdefg_____________________]

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

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

文本大小的技巧还可以，但您也可以使用visibrity：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>

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

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

1( 使用向左浮动的内容可编辑div：2( 用另一个宽度为200的div包围该div，border，onlick将焦点设置为可编辑的div3( 将要显示的div放在可编辑div后的最后一个字母后面，也浮动在的左侧

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

单击框并开始键入。绿色框将随光标位置移动。

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

遗憾的是，没有内置的"textWidth"参数。然而，一个很好的破解方法是：你可以计算字符数，猜测它们的宽度，并将div"left"param设置为等于字符计数*宽度(并确保其绝对定位(。类似于： 
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动画到目标位置(，您就应该开始工作了。

希望能有所帮助。

如前所述，只有当字体是单空格的并且用户根本不修改字体大小时，这才会起作用。

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

或

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

  1. 设置要输入的字体大小
  2. 使用文本对输入进行屏幕截图，并查看1个符号使用了多少px(平均值(
  3. count symbolos*1的平均宽度+输入左填充=您想要的：(简单的解决方案

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

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

现在，您可以预先设置等于目标div中的长度的空白数目。

受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中(。

希望这能有所帮助。

相关文章：