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代码：
<script type="text/javascript"> function ShowElement(element) { var oldhtml = element.innerHTML; //如果已经双击过，内容已经存在input，不做任何操作 if(oldhtml.indexOf('type="text"') > 0){ return; } //创建新的input元素 var newobj = document.createElement('input'); //为新增元素添加类型 newobj.type = 'text'; //为新增元素添加value值 newobj.value = oldhtml; //为新增元素添加光标离开事件 newobj.onblur = function() { //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 if(this.value && this.value.trim()!==""){ element.innerHTML = this.value == oldhtml ? oldhtml : this.value; } else { element.innerHTML = oldhtml; } } //设置该标签的子节点为空 element.innerHTML = ''; //添加该标签的子节点，input对象 element.appendChild(newobj); //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置） newobj.setSelectionRange(0, oldhtml.length); //设置获得光标 newobj.focus(); } </script>
欢迎指正，谢谢阅读~
