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

【问题标题】：Show an input text field as plain text将输入文本字段显示为纯文本
【发布时间】：2013-12-02 17:18:15
【问题描述】：

我想要一个像这样的可编辑 div：

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

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

【问题讨论】：

使用input type="hidden" 值复制内容
使用 CSS #test, #test:active { border: none; outline: none; } 去除输入边框

标签： javascript php jquery html css

【解决方案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" />

转到 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;
}

DEMO HERE

我希望这会有所帮助，祝你好运！

【讨论】：

【解决方案2】：

可编辑的输入文本字段

text[contenteditable] {
    border: 1px solid #000;
    padding: 10px;
}

text[contenteditable]:hover {
    background: #ff0;
}

Demo

【讨论】：

【解决方案3】：

按照其他人的建议使用textarea：

<textarea style="border: none;">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</textarea>

或者如果您不希望它可编辑，则只需插入一个隐藏字段：

lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
<input type="hidden">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</input>

【讨论】：

【解决方案4】：

<input style="border:0" name="" placeholder="type here"/>

或

<textarea rows="4" cols="50" style="border:0" placeholder="type here"></textarea>

【讨论】：

【解决方案5】：

改用 textarea 并应用 css 去除边框

            <textarea style="border: none;"></textarea>

【讨论】：