显示输入文本为span，width trouble

Question

我试图让输入文字看起来像一个跨度。我希望我的用户能够输入文字而不会注意到他在某个领域。

我几乎成功了，我遇到的最后一个问题是关于输入的宽度。 输入文本比它替换的文本更宽。 这是jsfiddle。 （您可以点击＆＃34; Texte＆＃34;输入您的。）

这是有趣的CSS部分：

input {
    background-color: transparent;
    padding: 0px;
    border: initial;
    font: inherit;
    margin: 0px;
}

Answer 1

这个想法尝试输入的固定宽度

演示：http://jsfiddle.net/nyitsol/eotd8p4n/17/

您也可以尝试使用相同宽度的输入

$('span.width').width(); // returns a width value

使用它获取span的宽度并使用JavaScript将其放入输入框。

编辑： 试试这个，如果你想根据文本限制增加输入，那么你也必须增加大小。

http://jsfiddle.net/nyitsol/eotd8p4n/25/

 var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');