Question

我在Tumbler上找到了我喜欢的东西并尝试重新创建它......但我有一个问题。

这就是我所拥有的： http://cl.vc/Beta/Tumbler/test.html

HTML：

<form method="post" name="form" id="form"> 
<span id="myText"><p hidden>good</p></span> 
<input type="text" id="input" name="input" value="" onkeypress="showtext();"/>

JavaScript：

function showtext() {
    var inputlength = document.getElementById('input').value.length;
    var string = "";

    for (var i = 0; i <= inputlength; i++) {
        var string = string + "&nbsp;";
    }

    document.getElementById('myText').innerHTML = string + "cl.vc";
    document.getElementById('myText').style.zIndex = "2";
}

问题是该空格与输入hhhhh或iiiiii时的空格不同，因为字母的大小不同..我还想在删除文本的情况下取走空间..

Answer 1

将文字放在另一个div中并使用以下答案测量宽度：Determine Pixel Length of String in Javascript/jQuery?

然后，将后缀设置为从宽度

确定的偏移量开始

Answer 2

使用以下样式创建样式的DIV。在JavaScript中，设置您要测量的字体大小和属性，将字符串放在DIV中，然后读取DIV的当前宽度和高度。它将拉伸以适合内容，并且大小将在字符串渲染大小的几个像素内。

HTML：

<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

CSS：

#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
}

JavaScript（片段）：

var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

尝试使用javascript在输入表单中添加“ghost”文本

2 个答案: