前端学习开发实例 HTML文本编辑功能实现(Javascript )

参考文档:JavaScript 教程 W3school


文章目录

  • 功能需求
  • 结果展示
  • 源代码
    • index.html



功能需求

实现HTML界面文字内容的可编辑(H5中的contenteditable属性)。
(使用Javascript DOM和点击事件)



结果展示

默认状态:
前端学习开发实例 HTML文本编辑功能实现(Javascript )_第1张图片

点击文本内容:
前端学习开发实例 HTML文本编辑功能实现(Javascript )_第2张图片

编辑内容:
前端学习开发实例 HTML文本编辑功能实现(Javascript )_第3张图片
点击输入框之外:
前端学习开发实例 HTML文本编辑功能实现(Javascript )_第4张图片
再次点击(还可以继续修改):
前端学习开发实例 HTML文本编辑功能实现(Javascript )_第5张图片



源代码



index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div style="position: absolute; margin: 50px"> <!--绝对布局:重叠显示-->
  <p id="p1">基础文本内容</p>
  <input id="input1" type="text" value="输入框默认值" hidden>
</div>

<script>
  document.getElementById("p1").addEventListener("click", function () { //点击文本内容触发:变成输入框
    var myinput1 = document.getElementById("input1");
    this.hidden = true; //文本隐藏
    myinput1.setAttribute("value", this.innerHTML); //输入框文字为先前文本文字
    myinput1.hidden = false; //输入框出现
    //myinput1.select(); //使文字内容自动被选中
  })

  document.addEventListener("click", function (e) { //点击输入框以外内容触发:变成文本
    var myp1 = document.getElementById("p1");
    var myinput1 = document.getElementById("input1");
    if(e.target != myp1) //debug:目标不能为p标签,否则一开始会触发两个监听事件
      if(!myinput1.hidden && e.target != myinput1) { //如果输入框不是隐藏状态,并且点击的位置不是输入框
        myinput1.hidden = true; //输入框隐藏
        myp1.innerHTML = myinput1.value;
        myp1.hidden = false; //文本出现
      }
  })
</script>


</body>
</html>

你可能感兴趣的:(前端学习开发实例,javascript,html)