我们经常在网页中看到这种形式的内容，如图：
用鼠标点击一下，就变成了一个input，如图：
如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。
我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个div或p元素，点击之后变成一个input元素，鼠标离开则变回原元素。代码（含详细注释版）如下：
页面加载完给id为click-to-add的元素增加onclick方法
document.getElementById("click-to-add").onclick = function () {
// this在这个函数中就是id为click-to-add的元素，将其保存到变量non_input_type
var non_input_type = this;
// 新建一个input，保存到变量input_type
var input_type = document.createElement("input");
// 给input添加class和placeholder，这里我发现class对bootstrap有效
input_type.setAttribute("placeholder","添加待办事项");
input_type.className = "form-control";
// 获取父元素，然后父元素替换Child
this.parentNode.replaceChild(input_type,non_input_type);
// 设置焦点到input框中
input_type.focus();
// 当input失去焦点，即鼠标点到了别的地方
input_type.onblur = function () {
// 且input中没有输入内容时
if (input_type.value.length === 0){
// 再替换回原来的对象
input_type.parentNode.replaceChild(non_input_type,input_type);
}
}
}
};
对应的html代码则很简单：
+ 添加待办事项
