使用 DIV 作为输入答案

【问题标题】：Use a DIV as an input使用 DIV 作为输入
【发布时间】：2016-10-06 15:13:47
【问题描述】：

对不起，如果这个问题非常基本，但我正在尝试重新开始编程，但我一直坚持这个问题。

我想在 HTML 中将文本输入到 <div>，但我不想要 <input> 附带的默认聊天框。我只是希望它直接打印到<div> 中的某个位置。

我该怎么做？

【问题讨论】：

标签： html input

【解决方案1】：

如果你不想将它的值提交给服务器，你可以使用 contenteditable 属性，就像这样：

<div contenteditable="true">I'm Editable. Edit me!</div>

这样用户可以编辑文本，但它不会被发送到服务器，它只是客户端的东西。

但是如果您需要将值提交到服务器，则必须使用 TextArea 或 Input 标签并通过 CSS 样式删除边框。说：

<input id="myText" type="text" style="border:none; background: transparent; outline: 0;"/>

【讨论】：

【解决方案2】：

使用<div>

使用contenteditable attribute 使 div 本身成为文本输入（正如您在 cmets 中提到的）：

<div contenteditable="true" style="outline:0px;">Hodor!</div>

要获取值，您可以使用 jQuery $("div").text() 或 js textContent

要在<form> 中使用<div>，请添加一些js 来连接它。你可以看一个例子here。

使用<textarea>

如果你隐藏一些属性，你也可以使用<textarea>：

<textarea style="resize:none;overflow:auto;
        border:0px;outline:0px;background-color:transparent;">
    Hodor!
</textarea>

要获取值，您可以使用 jQuery $("textarea").val() 或 js value

【讨论】：

【解决方案3】：

【讨论】：

【解决方案4】：

contenteditable 属性指定元素的内容是否可编辑。 Demo

<div contenteditable="true">Use me as input box, but i am not a part of form submit to server</div>

【讨论】：