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

Question

我希望有一个像这样的可编辑div:

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

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

Answer 1

因为我不能100%肯定你的要求,所以我做了一些小事.有人在我写这篇文章时已经提到了,但仍然可以看看.

HTML:

所以你可以在这里有两件事,textarea和输入.我们将从输入开始(尽管它们几乎相同,具体取决于您要对它们执行的操作)

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" />

转到textarea,你可以看到我们正在使用相同的类(在代码下面查看),因为不需要为textarea更改任何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;
}

在这里演示

我希望这有帮助,祝你好运!