将输入文本字段显示为纯文本 [英] Show an input text field as plain text

问题描述

我想有一个类似这样的可编辑的div：

I want to have a sort of editable div like this:

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

但它必须是一个输入字段，因此在您提交表单时，它。有人知道如何显示输入字段，就像带有占位符的纯文本一样。

But it has to be an input field so it's submitted when you submit the form with the input field in it. Does someone knows how I can show the input field just as plain text with a placeholder?

推荐答案

我不是100％肯定你是要求，所以我覆盖了几件事。

I have made a little fiddle as I'm not 100% sure what you are asking for so I covered a few things. Some have been mentioned already as I was writing this but still lets have a look.

所以你可以在这里有两个东西，textarea和输入。我们将从输入开始（虽然根据你想要做什么，它们几乎是一样的）

So you can have two things here, textarea and input. We will start with inputs (although they are pretty much the same depending on what you want to do with them)

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。

Moving on to textarea, as you can see we are using the same class's (view below the code) as there is no need to change any CSS for the textarea.

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

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

这个使用 readonly 因为它说。如果你看看我已经链接在底部的演示，你会看到它不允许您编辑。我很少看到它，所以不知道是否有什么坏的，但无论如何，它的一个选择。第二个类似上面的输入之一有一个占位符。

This one uses readonly, it does exactly as it says. If you look at the demo I have linked at the bottom you will see it does not allow you to edit. I very rarely see it so not sure if there is something bad about it but none the less its an option. The second one like one of the inputs above has a placeholder.

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

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

CSS：

$ b b

CSS:

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

DEMO HERE

我希望这有助于，祝你好运！

I hope this helps, good luck!

这篇关于将输入文本字段显示为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！