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

DEMO HERE

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

Answer 2

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

或

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

Answer 3

使用textarea代替并使用css删除边框

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

Answer 4

使用其他人建议的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>

Answer 5

可编辑的输入文字字段

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

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

Demo

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

5 个答案:

HTML：

CSS：