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

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

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

<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?

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

5 个解决方案

#1

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.

我已经做了一点小提琴,因为我不是100%肯定你所要求的,所以我介绍了一些事情。有人在我写这篇文章的时候已经提到了,但还是让我们来看看。

HTML:

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)

所以你可以在这里有两件事,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" />

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

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

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

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.

这个使用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

I hope this helps, good luck!

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

5 个解决方案

#1

HTML:

CSS:

更多相关文章

随机推荐