前端实现双击编辑Input
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/63d25b9dbad80788ae26d137e51d4e9f.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript">
function editElement(element) {
var oldhtml = element.innerHTML;
var newobj = document.createElement('input');
newobj.type = 'text';
newobj.value = oldhtml;
newobj.onblur = function() {
element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
}
element.innerHTML = '';
element.appendChild(newobj);
newobj.setSelectionRange(0, oldhtml.length);
newobj.focus();
}
</script>
</head>
<body>
<dl>
<dt>用户名:</dt>
<dd ondblclick="editElement(this)">张三</dd>
<dt>昵称:</dt>
<dd ondblclick="editElement(this)">张狗蛋</dd>
</dl>
</body>
</html>