实现双击编辑input

最新推荐文章于 2024-05-31 17:47:47 发布

天生欧皇张狗蛋

最新推荐文章于 2024-05-31 17:47:47 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签：前端 js

本文链接：https://blog.csdn.net/weixin_43770430/article/details/123889750

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端实现双击编辑Input

在这里插入图片描述

照猫画虎系列-请使用cv大法

<!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;
    //创建新的input元素
    var newobj = document.createElement('input');
    //为新增元素添加类型
    newobj.type = 'text';
    //为新增元素添加value值
    newobj.value = oldhtml;
    //为新增元素添加光标离开事件
    newobj.onblur = function() {
      element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
      //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 
    }
    //设置该标签的子节点为空
    element.innerHTML = '';
    //添加该标签的子节点，input对象
    element.appendChild(newobj);
    //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
    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>