css - 将输入文本显示为跨度，宽度问题

Question

我正在尝试使输入文本看起来完全像一个跨度。我希望我的用户能够在不注意他在字段中的情况下键入文本。

我几乎成功了，我遇到的最后一个问题是关于输入的宽度。输入文本比它要替换的文本宽。这是 jsfiddle . (您可以点击“Texte”输入您的文字)。

这是有趣的 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

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

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

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

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