试图添加一个“；“鬼魂”；使用javascript输入表单中的文本

我在不倒翁上找到了我喜欢的东西，并试着重新制作。。但我有个问题

这就是我试图克隆的内容：

这就是我所拥有的：

HTML:

良好

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";
}

函数showtext（）{
var inputlength=document.getElementById（'input'）.value.length；
var字符串=”；
对于（var i=0；i创建一个具有以下样式的DIV。在JavaScript中，设置要测量的字体大小和属性，将字符串放入DIV，然后读取DIV的当前宽度和高度。它将拉伸以适合内容，大小将在字符串渲染大小的几个像素以内

HTML:

JavaScript（片段）：

将文本放在另一个div中，并使用以下答案测量宽度：

然后，将后缀设置为从您根据宽度确定的偏移量开始
我尝试了这个方法，但它没有正常工作……这个框的代码太多了……什么工作不正常？您已经有了一个很好的开始，现在您只需添加边距，考虑到删除字符的时间，等等这似乎不像我想的那样工作我使用的是clientWidth（）；但它不正常……我做错了什么？我对一个jQuery插件感兴趣，它复制了第一个链接的功能（但不是后缀，我想要一个前缀）。你找到什么了吗？
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";
}

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

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

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