行内编辑组件按下Escape键恢复输入框初始值的实现问题

问题核心原因 #

你当前的代码在noEdit函数中直接读取输入框的当前值作为原始值，自然无法恢复到进入编辑状态前的内容。需要在进入编辑状态时就提前存储原始值，退出编辑时按需读取恢复即可。

解决方案 #

我们可以利用HTML元素的dataset属性存储原始值，不需要额外声明全局变量，逻辑更简洁：

1. 在yesEdit触发进入编辑状态时，将输入框当前的 value 存入元素的自定义属性中
2. 在noEdit中根据操作类型判断：如果是取消操作（ESC触发、取消按钮触发），就读取之前存储的原始值赋值回输入框；如果是保存操作则保留当前输入值

修改后的完整代码 #

HTML部分 #

<div class="c-inline-edit--icons">
    <div id="inline-edit-wrapper-1" class="c-inline-edit-wrapper">
        <input id="inline-edit-input-1" class="c-readonly-input c-input--default" type="text" value="Lorem ipsum" onclick="yesEdit(1)" readonly/>
        <a id="btn-edit-1" class="btn-icon-edit" onclick="yesEdit(1)"><span class="icon icon-16-edit-default-mono"></span></a>
    </div>
    <div class="c-btn-set-icon large">
        <!-- 取消操作传第二个参数为true标识需要恢复原始值 -->
        <a id="btn-cancel-1" class="btn-icon c-btn-secondary" onclick="noEdit(1, true)"><span class="icon-24-close-mono"></span></a>
        <!-- 保存操作传第二个参数为false标识保留修改 -->
        <a id="btn-save-1" class="btn-icon c-btn-primary" onclick="noEdit(1, false)"><span class="icon-24-checkmark-mono"></a>
    </div>
</div>

JavaScript部分 #

function yesEdit(idNo) {
  document.getElementById("btn-edit-" + idNo).style.display = "none";
  document.getElementById("btn-save-" + idNo).style.display = "inline-block";
  document.getElementById("btn-cancel-" + idNo).style.display = "inline-block";
  var element = document.getElementById("inline-edit-input-" + idNo);
  // 进入编辑时存储原始值到dataset
  element.dataset.originalValue = element.value;
  element.removeAttribute("readonly");
  element.classList.replace("c-readonly-input", "c-input");
}
function noEdit(idNo, isCancel) {
  document.getElementById("btn-edit-" + idNo).style.display = "inline-block";
  document.getElementById("btn-save-" + idNo).style.display = "none";
  document.getElementById("btn-cancel-" + idNo).style.display = "none";
  var element = document.getElementById("inline-edit-input-" + idNo);
  // 如果是取消操作，恢复原始值
  if (isCancel) {
    element.value = element.dataset.originalValue;
  }
  element.setAttribute("readonly", "");
  element.classList.replace("c-input", "c-readonly-input");
}
var inline1 = document.getElementById("inline-edit-input-1");
inline1.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    // ESC属于取消操作，传true
    noEdit(1, true);
  } else if (event.key === "Enter") {
    // 回车默认保存，传false
    noEdit(1, false);
  }
});

内容的提问来源于stack exchange，提问作者iosSicilian