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