个性签名在线即时更新的魅力 ——立马编辑，无缝体验

Danta
836 阅读6分钟

前言：

你还记得你小时候在QQ上写的沙雕个性签名吗？今天来教大家如何实现。

在线编辑（EditInplace）：提升前端用户体验的案例

在当今快节奏的互联网环境中，提供良好的用户体验是每个网站或应用成功的关键。本文将通过一个具体的例子——在线编辑个性签名的功能，来探讨如何利用DOM编程实现无缝的用户体验改进。我们将比较传统的表单提交方式与使用EditInplace技术之间的差异，并展示如何通过JavaScript和HTML来实现这种更加用户友好的交互模式。并且始终记住一个观点，把用户当小白，永远要想着怎么去更好的优化你的代码！

传统表单提交 vs. EditInplace

传统表单提交

通常涉及用户填写表单字段后点击“提交”按钮，这会导致页面刷新或跳转到另一个页面显示结果。虽然这种方法简单直接，但对于仅需修改少量信息的情况来说，它可能显得不够高效且破坏了用户的操作流程。例如，当用户想要更新他们的个性签名时，如果每次都需要重新加载整个页面，这显然会降低效率并影响用户体验。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com" method="post">
        <div>
            <label //点标签直接输入 for="input" >签名</label>
            <input type="text" name="signature" id="input" //细节点： placeholder="请输入签名"  required>
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>
</body>
</html>

做了哪些优化：

  • 在label标签中添加了for属性并且绑定了input这个id，这样做目的是：当用户点击签名就可以进行输入。
  • input 标签的输入框中，设置默认值请输入签名

实现EditInplace

下面是一个简单的HTML+JavaScript示例，用于演示如何实现个性签名的即时编辑功能：

229189149229136182-2024-12-01-131108.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInplace 哔哩哔哩用户体验打造</title>
</head>
<body>
    <div id="app">
        <div id="epl"></div>
        <span>个性签名：</span>
     <span id="content">一等奖学金获得者</span>
     <input type="text" id="input" value="一等奖学金获得者">
        </div>
    <div><input type="button" id="save" value="Save">
     <input type="button" id="cancel" value="Cancel">
      </div> 


    <script>
        // dom js html 节点对象 动态操作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';
       }

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


       convertToText()
     // 点击文本 进入编辑状态
       content.addEventListener('click',function(){
        convertToEdit();
        // 输入最新的签名
        input.value=content.innerText;
       })
      
       // 点击保存 保存最新的签名
       save.addEventListener('click',function(){
        content.innerText=input.value;
        convertToText();
       })
       // 点击取消 回到文本状态
       cancel.addEventListener('click',function(){
        convertToText();
       })
       // 回车 保存
        input.addEventListener('keydown', function(e) {
            if (e.key  === 'Enter') { // 使用 e.key 来检测 Enter 键
                e.preventDefault(); // 防止默认行为（如表单提交）
                save.click();
            }
        });
    </script>
</body>
</html>

流程解释：

  1. HTML结构:

    • <div id="app">：包含所有相关的DOM元素。
    • <span id="content">一等奖学金获得者</span>：显示当前的个性签名文本。
    • <input type="text" id="input" value="一等奖学金获得者">：当进入编辑模式时，此输入框将用于编辑个性签名。
    • <input type="button" id="save" value="Save"> 和 <input type="button" id="cancel" value="Cancel">：分别用于保存和取消编辑。

  2. JavaScript逻辑:

    • 首先，通过document.getElementById()方法获取到相关DOM元素的引用。

    • 定义了两个函数convertToText()和convertToEdit()来切换文本显示状态与编辑状态：

      • convertToText()：隐藏输入框和按钮，只显示个性签名文本。
      • convertToEdit()：隐藏个性签名文本，显示输入框和按钮，让用户可以编辑签名。

    • 初始状态下调用convertToText()，使页面处于文本显示状态。

    • addEventListener 是 JavaScript 中用于为特定元素添加事件处理程序的方法。它接受两个参数：第一个参数是事件类型（例如 'click'），第二个参数是事件发生时要执行的函数（可以是命名函数或匿名函数）。

    • 为个性签名文本添加点击事件监听器，当用户点击时，调用convertToEdit()进入编辑状态，并将当前显示的签名内容设置为输入框的值。

    • 为“保存”按钮添加点击事件监听器，在点击时将输入框中的值更新到个性签名文本中，并调用convertToText()返回文本显示状态。

    • 为“取消”按钮添加点击事件监听器，点击时直接调用convertToText()返回文本显示状态，不保存任何更改。

    • 为输入框添加键盘事件监听器，如果用户按下回车键，则模拟点击“保存”按钮的行为，即触发保存操作。

  3. 交互流程:

    • 用户初始看到的是个性签名文本。
    • 当用户点击该文本时，它会消失，取而代之的是一个输入框和两个按钮（保存/取消）。
    • 用户可以在输入框中修改个性签名。
    • 如果用户点击“保存”，则新的签名会被保存并显示出来；如果点击“取消”，则恢复到原始签名文本。
    • 用户也可以通过按回车键来快速保存更改。 相比之下，EditInplace允许用户直接在页面上编辑内容，而无需离开当前视图或重新加载页面。这种方式不仅提高了操作速度，还保持了界面的连续性，使用户能够更自然地进行交互。接下来，我们将深入探讨如何实现这样的功能。

最终优化

当我们实现了EditInplace就地编辑之后，我们可以发代码还是很冗长，看上去不是那么清晰，是不是可以想想如何再去优化一下呢？

思路： 走向面向对象封装，这样的话，就像new一个对象那样使用，只要写出一次框架，之后直接就可以使用了。

HTML：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>面向对象的 EditInPlace</title>
  <style>
    /* 添加一些基本样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .edit-in-place {
      margin-bottom: 20px;
    }
    .edit-in-place input, .edit-in-place button {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="./editInPlace.js"></script>
  <script>
    // 创建两个 EditInPlace 实例
    new EditInPlace('ep1', document.getElementById('app'));

  </script>
</body>
</html>

JS结构：


/**
 * @func 就地编辑
 * @params { id, parent 父节点, value 默认值}
 * @author KK
 * @date 2024-12-1
 */
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) {
  // 创建容器元素
  this.containerElement = document.createElement('div');
  this.containerElement.id = this.id;
  this.parent.appendChild(this.containerElement);

  // 创建静态显示元素
  this.staticElement = document.createElement('span');
  this.staticElement.innerText = this.value;
  this.containerElement.appendChild(this.staticElement);

  // 创建输入框
  this.inputElement = document.createElement('input');
  this.inputElement.type = 'text';
  this.inputElement.style.display = 'none';
  this.containerElement.appendChild(this.inputElement);

  // 创建保存按钮
  this.saveButton = document.createElement('button');
  this.saveButton.innerText = 'Save';
  this.saveButton.style.display = 'none';
  this.containerElement.appendChild(this.saveButton);

  // 创建取消按钮
  this.cancelButton = document.createElement('button');
  this.cancelButton.innerText = 'Cancel';
  this.cancelButton.style.display = 'none';
  this.containerElement.appendChild(this.cancelButton);

  // 添加点击事件监听器
  this.addEventListeners();
};

EditInPlace.prototype.addEventListeners = function() {
  const self = this;

  // 点击文本进入编辑状态
  this.staticElement.addEventListener('click', function() {
    self.convertToEdit();
    self.inputElement.value = self.staticElement.innerText;
  });

  // 点击保存按钮保存最新的签名
  this.saveButton.addEventListener('click', function() {
    self.staticElement.innerText = self.inputElement.value;
    self.convertToText();
  });

  // 点击取消按钮回到文本状态
  this.cancelButton.addEventListener('click', function() {
    self.convertToText();
  });

  // 回车键保存
  this.inputElement.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      self.saveButton.click();
    }
  });
};

EditInPlace.prototype.convertToText = function() {
  this.inputElement.style.display = 'none';
  this.saveButton.style.display = 'none';
  this.cancelButton.style.display = 'none';
  this.staticElement.style.display = 'inline';
};

EditInPlace.prototype.convertToEdit = function() {
  this.staticElement.style.display = 'none';
  this.inputElement.style.display = 'inline';
  this.saveButton.style.display = 'inline';
  this.cancelButton.style.display = 'inline';
  this.inputElement.focus();
};

结语

看完本文，是不是已经想好自己酷酷的个性签名了，赶紧去试试吧。

avatar
文章
阅读
粉丝