显示一个输入文本框为纯文本。

Question

我希望有一个类似于这样可编辑的div：

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

但必须是一个输入字段，因此当您提交带有该输入字段的表单时，它将被提交。有人知道如何以纯文本形式显示具有占位符的输入字段吗？

- nielsv

---

使用 input type="hidden" 值来复制内容。 - jasonscript

使用CSS #test, #test:active { border: none; outline: none; } 来移除输入框的边框。 - icaru12

Answer 1

我做了一个小小的示例，因为我不确定您需要什么，所以我涵盖了一些内容。有些已经在我写作时提到了，但让我们还是看看。

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

转到文本区域，正如您所看到的，我们正在使用相同的类（请参见下面的代码），因为不需要更改任何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;
}

点击此处查看演示

希望这能帮到您，祝好运！

- Ruddy

Answer 2

<input style="border:0" name="" placeholder="在此输入"/>

或者

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

- Sree

Answer 3

使用文本区域代替，并应用 CSS 去除边框。

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

- rajesh kakawat

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>

- Dropout

Answer 5

可编辑的输入文本框

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

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

演示

- Pir Abdul