哔哩哔哩大厂必考题之"就地编辑(EditInPlace)"

黑马王子13
757 阅读4分钟

前言

很多人可能并不知道就地编辑这个词到底是什么意思。我们来举一个非常简单的例子

image.png

当我们需要编辑各个软件的个性签名时，就是用到了就地编辑这个概念。当我们用鼠标点击或者移到签名区域时，我们就可以对签名进行修改。那我们如何实现这个功能呢？本文将一步步展示给你。

实战

话不多说，直接开始展示！！！

我们主要用的是DOM编程，因为DOM是树结构，我们根据树节点对象来进行查找和展示。

首先我们创建一个常驻的个性签名，再设置一个修改部分，两个按钮分别是保存和退出，具体代码如下：

<div id ="app">
        <div id ="ep1">
            <span id="content">斗地主锦标赛第一名</span>
            <input type="text" id="input" value="斗地主锦标赛第一名">
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="Cancel">
        </div>
    </div>

然后我们用DOM创建几个需要用到的html节点对象

        const content = document.getElementById('content');
       const input = document.getElementById('input');
       const save = document.getElementById('save');
       const cancel = document.getElementById('cancel');

接下来就是文本状态的一些设置了，什么状态下应该展示什么。

  // 文本状态  业务编程
   function convertToText(){
        input.style.display='none';
        save.style.display='none';
        cancel.style.display='none';
        content.style.display='inline';
        }

默认的情况下，只展示文本内容，隐藏其余功能,页面结果呈现：

image.png

 // 编辑状态
        function convertToEdit(){
        input.style.display='inline';
        save.style.display='inline';
        cancel.style.display='inline';
        content.style.display='none';
        }
          convertToText();

此时我们就需要展示修改的部分，隐藏默认值。 在我们html页面输入f12进入页面终端，输入content.style.display='none'和convertToEdit(),就能展现出这个页面：

image.png 那我们怎么样才能有，鼠标点击就能出现效果的样式呢？

这里就需要用到DOM中监听器这个概念了,我们可以设置为“点击”：

content.addEventListener('click',function(){
        convertToEdit();
        // 输入框里是最新的签名
        input.value=content.innerText;
        });
        // 点击save按钮 保存编辑内容 
        save.addEventListener('click',function(){
        content.innerText=input.value;
        convertToText();
        });
        // 点击cancel按钮  取消编辑
        cancel.addEventListener('click',function(){
        convertToText();

完成这些后，我们来试试效果，假如我们现在进入了修改阶段

image.png 假如我们要将个性签名修改为睡觉比赛第一名，我们只要在编辑框中输入就行，再点击Save 就会得到效果了

image.png

方法2：form

上面是传统DOM编程，方法传统修改数据， 提交表单。传统表单 提交，刷新页面。 这种答案已经能在面试官那边拿到很高的分数了，那我们怎么拿到100分呢？

让我们再来看一个页面,源代码如下：

 <form action="https://www.baidu.com" method="post">
       <div>
           <label>签名</label>
           <input type="text"
            name="signature"
            id="input"
            >
       </div>
       <div>
           <input type="submit" value="提交">
       </div>
   </form>

这里我们用了form方法，用action属性来指定表单数据提交到哪里。以及一个 method 属性来指定使用哪种HTTP方法（通常是 GET 或 POST）发送数据。

image.png 页面看起来简洁了很多，但有没有需要修改的地方呢？ 答案是肯定的。

我们可以加入以下部分

     placeholder="请输入签名"
             required

将<label>签名</label>改成 <label for="input">签名</label> 此时，我们的页面会变成这样

image.png 假如我们提交了一个空值，他会显示：

image.png 这个部分是required作用，让指定表单必填。

placeholder则是提升用户体验，有些特殊人群可能不知道这部分区域是用来干什么的。

label for：当你点击签名这个标签时，文本输入框会自动获得焦点，即使点击的是标签本身而不是输入框。

拓展

还有方法，我们用js与html结合起来，让我们在根目录下创建一个editInPlace.js文件。在html中输入：

<div id="app">
  </div>
  <script src="./editInPlace.js"></script>
  <script>
  // 流程代码， 走向面向对象封装
  new EditInPlace(
    'ep1', 
    document.getElementById('app')
  );
    </script>

此时我们就在html中引用了新创建的js文件 而在我们的js文件中输入：

// editInPlace.js文件

function EditInPlace(id,parent,value){
    this.id = id; // 跨函数共享属性
    this.parent = parent || document.body; // 没有找到父节点则在主节点
    this.value = value ||  '这个家伙很懒，什么都没有留下'; //没有输出 就输出这个家伙很懒，什么都没有留下
    this.createElement(this.id);
}
  EditInPlace.prototype.createElement = function(id) { 
  // 创建一个 div 元素作为容器 
  this.containerElement = document.createElement('div');
  // 设置容器元素的 id
  this.containerElement.id = this.id;
  // 将容器元素添加到父元素中
  this.parent.appendChild(this.containerElement);
  // 创建一个 span 元素用于显示静态文本
  this.staticElement = document.createElement('span');
  // 设置 span 元素的文本内容 
  this.staticElement.innerText = this.value;
  // 将 span 元素添加到容器元素中
  this.containerElement.appendChild(this.staticElement);
  }

我们声明了一个函数，注意首字母大写！

用this指针

具体过程就不细讲了，感兴趣的可以自行去查阅。

经过这些步骤，我们就可以得到页面

image.png

结语

这就是就地编辑的基本方法，希望大家可以从中收获。

avatar
文章
阅读
粉丝