试图在javascript输入窗体中添加一个“鬼”文本

我发现了一些我喜欢的不倒翁，并试图重新创建它..但我有一个问题。试图在javascript输入窗体中添加一个“鬼”文本

，这是我所： 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，因为字母的大小是不同的..我也想如果删除文字如果带走空间..

来源

2011-03-14 user633268

http://cl.vc/Beta/Tumbler/jstester.html这似乎并没有像我想要的那样工作... im使用clientWidth（）;但它不能正常工作...... 我做错了什么？ – user633268 2011-03-16 12:00:13

我对jQuery插件感兴趣，该插件复制第一个链接的功能（但不是后缀，我想要一个前缀）。你找到什么了吗？ – AlfaTeK 2011-03-30 22:27:19

创建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";

来源

2011-03-14 19:27:42 Keysmack

把文字在另一个DIV并测量宽度，这里使用了答案： Determine Pixel Length of String in Javascript/jQuery?

然后，设置你的后缀开始在你从宽度确定的偏移量

来源

2011-03-14 19:29:03

我试过这个，但它不能正常工作.. http://cl.vc/Beta/Tumbler/jstester.html .. 这个盒子的代码太多了.. – user633268 2011-03-14 23:13:47

什么不能正常工作？你有一个好的开始，现在你只需要添加边距，考虑删除字符时等等 – 2011-03-15 01:09:11

试图在javascript输入窗体中添加一个“鬼”文本

回答

相关问题