javascript - 将输入文本字段显示为纯文本

Question

我想要一种像这样的可编辑的 div:

<div onClick="this.contentEditable='true';">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>

但它必须是一个输入字段，所以当您提交带有输入字段的表单时，它就会被提交。有人知道如何将输入字段显示为带有占位符的纯文本吗？

Answer 1

由于我不是 100% 确定您的要求，所以我做了一些小改动，所以我介绍了一些内容。有些已经在我写这篇文章时提到了，但还是让我们看看吧。

HTML:

所以你可以在这里有两个东西，textarea 和 input。我们将从输入开始(尽管它们几乎相同，具体取决于你想用它们做什么)

Input w/ no border:
<input class="noborder" />

Input w/ no border or outline:
<input class="nothing" />

Input w/ no border:
<input class="noborder" placeholder="Placeholder here" />

转到文本区域，如您所见，我们正在使用相同的类(查看代码下方)，因为不需要更改文本区域的任何 CSS。

Textarea w/ no border:
<textarea class="noborder"></textarea>

Textarea w/ no border or outline:
<textarea class="nothing"></textarea>

这个使用readonly，它完全按照它说的做。如果您查看我在底部链接的演示，您会发现它不允许您进行编辑。我很少看到它，所以不确定它是否有什么不好，但它仍然是一个选择。第二个像上面的输入之一一样有一个占位符。

Textarea w/ readonly:
<textarea class="nothing" readonly>Try edit</textarea>

Textarea w/ readonly:
<textarea class="nothing" placeholder="Placeholder here" readonly></textarea>

CSS:

.noborder {
    border: 0;
}
.nothing {
    border: 0;
    outline: none;
}

DEMO HERE

希望对您有所帮助，祝您好运!