JS实现双击编辑可修改

需求描述：在一段文字处双击可以进行修改，也就是双击后创建输入框，输入内容，在输入框失去焦点后将输入的内容再以文字的形式显示出来，以下是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>

原文地址：https://www.cnblogs.com/php-linux/p/8510006.html