需求描述：在一段文字处双击可以进行修改，也就是双击后创建输入框，输入内容，在输入框失去焦点后将输入的内容再以文字的形式显示出来，以下是html代码：
1 <fieldset>2 ????????<legend>双击用户名进行编辑</legend>3 ????????<dl>4 ????????????<dt>你的用户名:</dt>5 ????????????<dd ondblclick="ShowElement(this)">诸葛亮</dd>6 ????????</dl>7 ????</fieldset>
以下是摘录的JavaScript代码：
1 <script type="text/javascript"> 2 ????????function ShowElement(element) { 3 ????????????var oldhtml = element.innerHTML; 4 ????????????//创建新的input元素 5 ????????????var newobj = document.createElement(‘input‘); 6 ????????????//为新增元素添加类型 7 ????????????newobj.type = ‘text‘; 8 ????????????//为新增元素添加value值 9 ????????????newobj.value = oldhtml;10 ????????????//为新增元素添加光标离开事件11 ????????????newobj.onblur = function() {12 ????????????????element.innerHTML = this.value == oldhtml ? oldhtml : this.value;13 ????????????????//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 14 ????????????}15 ????????????//设置该标签的子节点为空16 ????????????element.innerHTML = ‘‘;17 ????????????//添加该标签的子节点，input对象18 ????????????element.appendChild(newobj);19 ????????????//设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）20 ????????????newobj.setSelectionRange(0, oldhtml.length);21 ????????????//设置获得光标22 ????????????newobj.focus();23 24 ????????}25 ????</script>这里存在一个小问题，就是当已经双击一次的情况下，input已存在，再次双击，会出现input的内容被替换为上次双击的input的html代码。
解决方案是判断是否已存在input标签，如果存在，直接return，不做任何操作。
以下是修改后的Js代码：
1 <script type="text/javascript"> 2 ????????function ShowElement(element) { 3 ????????????var oldhtml = element.innerHTML; 4 ????????????//如果已经双击过，内容已经存在input，不做任何操作 5 ????????????if(oldhtml.indexOf(‘type="text"‘) > 0){ 6 ????????????????return; 7 ????????????} 8 ????????????//创建新的input元素 9 ????????????var newobj = document.createElement(‘input‘);10 ????????????//为新增元素添加类型11 ????????????newobj.type = ‘text‘;12 ????????????//为新增元素添加value值13 ????????????newobj.value = oldhtml;14 ????????????//为新增元素添加光标离开事件15 ????????????newobj.onblur = function() {16 ????????????????element.innerHTML = this.value == oldhtml ? oldhtml : this.value;17 ????????????????//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 18 ????????????}19 ????????????//设置该标签的子节点为空20 ????????????element.innerHTML = ‘‘;21 ????????????//添加该标签的子节点，input对象22 ????????????element.appendChild(newobj);23 ????????????//设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）24 ????????????newobj.setSelectionRange(0, oldhtml.length);25 ????????????//设置获得光标26 ????????????newobj.focus();27 28 ????????}29 ????</script>JS实现双击编辑可修改
原文地址：https://www.cnblogs.com/php-linux/p/8510006.html