Bootstrap：突出显示修改后的输入文本？

Question

是否有内置方式（或插件）突出显示input已修改的元素？只要输入没有其原始值，输入就会以某种方式突出显示（例如橙色边框）。可以使用 JavaScript 将所有输入标记为“未修改”（例如，通过我的“保存更改”按钮调用）。

Answer 1

您可以change为每个input元素添加一个事件监听器来添加一个类。

(function() {
  var inputs = document.querySelectorAll("input");

  for (var i = 0; i < inputs.length; i++) {
    var initialValue = inputs[i].value;

    inputs[i].addEventListener("change", function() {
      if (initialValue !== this.value) {
        this.classList.add("changed");
      } else {
        this.classList.remove("changed");
      }
    });
  }
})();

.changed {
  background-color: gold;
}

<form>
  <input type="text" value="Initial Value">
  <input type="text" value="Initial Value">
  <button type="submit">
    Save Changes
  </button>
</form>

如果您想在提交后突出显示它，您可以使用此类作为选择器来添加另一个具有所需样式的选择器。