bilibili页面实战：个性签名的就地编辑

池鱼ipou
VIP.1 初学乍练
534 阅读5分钟

引言

如何让用户能够方便快捷地修改自己的个性签名，并且保持良好的用户体验呢？传统的表单提交方式虽然可行，但往往打断了用户的流畅体验。因此，我们探索一种更为优雅且高效的解决方案——“Edit in Place”，它允许用户直接在网页上进行内容编辑并即时保存更改。

image.png

仅用HTML和CSS打造个性签名的基础框架

想象一下，你正在设计一款旨在促进交流和分享的应用程序，其中个性签名是用户展示自我的重要部分。为了实现这一功能，我们可以使用简单的HTML结构来创建一个显示个性签名的空间：

<div id="app">
    <div id="ep1">
        <span id="content">男德学院一等奖学金获得者</span>
        <input type="text" id="input" value="男德学院一等奖学金获得者" style="display: none;">
        <input type="button" id="save" value="Save" style="display: none;">
        <input type="button" id="cancel" value="Cancel" style="display: none;">
    </div>
</div>

这段代码定义了一段用于显示当前签名的文字，以及隐藏的输入框和按钮，以便用户在需要时进行编辑。通过这种方式，我们提供了一个直观而简洁的界面给用户，但是你会发现这和我们平时使用的编辑个性签名的界面相比，是不是就无法实现在线编辑的状态，而且没有那么人性化，因此接下来我们可以引进js来实现我们需要的效果。

JavaScript带来的互动魔法

为了让这个过程更加生动有趣，我们需要引入JavaScript来处理交互逻辑，使用户可以直接点击签名进入编辑模式，并在完成编辑后自动保存更新。这不仅提升了用户体验，还增加了应用的互动性和吸引力。

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() {
    input.style.display = 'inline';
    save.style.display = 'inline';
    cancel.style.display = 'inline';
    content.style.display = 'none';
    input.focus(); // 自动聚焦输入框
}

convertToText(); // 初始时设置为文本状态

// 点击文本 进入编辑状态
content.addEventListener('click', function () {
    convertToEdit();
    input.value = content.innerHTML; // 输入框里是最新的签名
});

// 点击保存 保存编辑状态
save.addEventListener('click', function () {
    content.innerHTML = input.value;
    convertToText();
});

// 点击取消 退出编辑状态
cancel.addEventListener('click', function () {
    convertToText();
});

这样的脚本使得个性签名成为了一个动态元素，用户只需简单点击即可切换到编辑状态。这种即时反馈机制极大地增强了应用的互动性，同时也体现了技术对改善用户体验的重要性，但仅仅这样还没有完成哦，要成为一名优秀的前端大佬，你必须要学会以下这一步。

使用面向对象的方法封装就地编辑功能

为了使代码更具可维护性和复用性，我们可以采用面向对象的方式封装就地编辑功能。下面是一个简单的示例，展示了如何使用构造函数和原型方法来实现这一目标。

HTML部分：

<div id="app"></div>
<script src="./editInPlace.js"></script>
<script>
    // 实例化就地编辑组件
    new EditInPlace(
        'epl', // 元素ID
        document.getElementById('app'), // 父级容器
        '好嗨哟' // 默认值
    );
</script>

JavaScript部分 (editInPlace.js) ：

/**
 * @func 就地编辑
 * @param {string} id - 元素ID
 * @param {HTMLElement} parent - 父节点
 * @param {string} value - 默认值
 * @author ysw
 * @date 2016-11-26
 */
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.value = this.value;
    this.inputElement.style.display = 'none';
    this.containerElement.appendChild(this.inputElement);

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

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

    // 绑定事件
    this.bindEvents();
};

// 绑定事件
EditInPlace.prototype.bindEvents = 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();
    });
};

// 转换为文本状态
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.inputElement.style.display = 'inline';
    this.saveButton.style.display = 'inline';
    this.cancelButton.style.display = 'inline';
    this.staticElement.style.display = 'none';
    this.inputElement.focus(); // 自动聚焦输入框
};

代码解释

  • 构造函数 EditInPlace:

    • 参数 id 用于标识生成的DOM元素。
    • 参数 parent 是将要挂载这些元素的父节点，默认为 document.body。
    • 参数 value 是默认显示的文本内容。
    • this.createElement(this.id); 调用 createElement 方法来创建并挂载DOM元素。

  • createElement 方法:

    • 创建一个 div 容器，并设置其ID。
    • 创建一个 span 元素用于显示文本内容。
    • 创建一个 input 元素用于编辑文本，初始状态下隐藏。
    • 创建两个按钮 Save 和 Cancel，初始状态下也隐藏。
    • 将这些元素添加到容器中，并将容器添加到父节点中。
    • 最后调用 bindEvents 方法来绑定事件监听器。

  • bindEvents 方法:

    • 为 span 元素绑定点击事件，进入编辑状态。
    • 为 Save 按钮绑定点击事件，保存编辑内容并返回文本显示状态。
    • 为 Cancel 按钮绑定点击事件，取消编辑并返回文本显示状态。

  • convertToText 和 convertToEdit 方法:

    • 通过控制DOM元素的 style.display 属性，在文本显示状态和编辑状态之间切换。

通过这种方式，我们将就地编辑功能封装成一个可复用的组件，使得代码更加模块化和易于管理。这种方法不仅提高了代码的可读性和可维护性，还为未来的扩展提供了便利。

总结

通过合理运用HTML、CSS及JavaScript，我们可以创造出既美观又实用的个性签名编辑体验。对于初学者而言，这是一个学习基本Web开发技巧的好机会；而对于经验丰富的开发者来说，则是一个提升项目质量和用户体验的有效途径。无论你是哪一类开发者，掌握这些技能都将帮助你更好地连接用户，让你的应用或网站更具魅力。

avatar
文章
阅读
粉丝