Question

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

Answer 1

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

CODE SNIPPET：

(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>

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

Answer 2

您可以使用AngularJS： -

<!DOCTYPE html>
<html lang="en">
<style>
    .red {
        color:red;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input ng-change="myFunc()" type="text" ng-model="user.firstName" id="change">
  </form>
  <p>The input field has changed {{count}} times.</p>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
        document.getElementById("change").className += " red";
    };
    $scope.reset();
});

</script>

</body>
</html>

的jsfiddle： -

https://jsfiddle.net/jve3x6Lk/1/

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

2 个答案:

CODE SNIPPET：