使 DIV 充当 INPUT 字段答案

【问题标题】：Make a DIV act as an INPUT field使 DIV 充当 INPUT 字段
【发布时间】：2013-05-20 09:51:48
【问题描述】：

我目前正在使用一堆输入文本字段，我想将其更改为 DIV，但是每当输入字段的值设置如下时，我的大多数 JS 函数都使用document.getElementById("inputField1").value：

<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>

如果我要在 alert 中显示值，那将只返回 Hello World!

如果我要使用 DIV，我将如何获得中间文本的值？

例如<div id="inField001">Hello World</div>

谢谢！

【问题讨论】：

【解决方案1】：

你会这样做

var value = document.getElementById('inField001').innerHTML);

但如果你的 DIV 有一些 html，它也会抓住它。

您也可以使用document.getElementById('inField001').textContent) 仅从元素中获取文本节点，而忽略任何元素包装器。

但是对 textContent 的支持不如 innerHTML。有关信息和支持，请参阅 doc。

另一种方法是使用innerText。 alert(document.getElementById('inField001').innerText); 但在 FF 中不支持。

请参阅Doc 以获得支持。

【讨论】：

【解决方案2】：

使用 innerHTML 属性。

document.getElementById("inField001").innerHTML

顺便说一句，这种事情最好用 jQuery 来做。

【讨论】：

【解决方案3】：

在这种情况下，您可以使用：

document.getElementById('inField001').innerHTML

或者：

document.getElementById('inField001').innerText

或者：

document.getElementById('inField001').textContent

另外（如果你想使用 jQuery）：

$('#inField001').text()

【讨论】：

【解决方案4】：

仅用于文本内容：

var value = document.getElementById('inputField1').textContent;

更详细的版本，see here.

【讨论】：

【解决方案5】：

或者干脆做

x = document.getElementById("inField001");
alert(x);

【讨论】：