javascript实现鼠标点击文本后变为输入框（文本动态编辑）
javascript实现鼠标点击文本后变为输入框

有不少页面应用中会有这样的情境：当鼠标放到一段文本并点击时，会隐藏当前文本，然后显示出一个编辑框，可用来对现在文本进行编辑。当鼠标在其他地方点击时，恢复到原来的文本显示，效果如下：

原始文本：

鼠标点击后如下：


我这里实现思路是：开始时有一个<p></p>用于最初文本的显示。当点击后，此标签的display被设置为none，同时创建两个新的元素：input和button。代码如下：

初始的页面效果代码：

对应的js代码如下，在注释中有详细的说明：



这样就实现了简单的动态编辑文本的效果了。