Блог

Главная - Вопросы по программированию - Bootstrap: выделить измененный вводимый текст?

Bootstrap: выделить измененный вводимый текст?

#html #css #twitter-bootstrap #twitter-bootstrap-4

#HTML #css #twitter-bootstrap #twitter-bootstrap-4

Вопрос:

Есть ли встроенный способ (или плагин), который выделяет input элементы, которые были изменены? До тех пор, пока входные данные не имеют своего исходного значения, входные данные будут каким-либо образом выделены (например, оранжевой рамкой). Можно пометить все входные данные как «неизмененные», используя JavaScript (например, вызываемый моей кнопкой «Сохранить изменения»).

Ответ №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>

Если вы хотите выделить его после отправки, вы можете использовать этот класс в качестве селектора, чтобы добавить еще один с желаемым стилем.

Комментарии:

1. Я надеялся на что-то встроенное, но этого будет достаточно.

2. @Ricky спасибо! Любопытно, как мы могли бы заставить это вступить в силу без необходимости выхода из поля ввода?

3. @jason3w Вместо использования change типа события используйте input : inputs[i].addEventListener("input", function() { ... })

4. спасибо, @Ricky за ответ. Я попробовал ваше предложение, однако мне все равно нужно убрать фокус с ввода, чтобы он сработал.

Ответ №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/