Bootstrap: 突出显示修改后的输入文本?
Bootstrap: highlight modified input text?
是否有内置方式(或插件)突出显示已修改的 input
元素?只要输入没有其原始值,输入就会以某种方式突出显示(例如橙色边框)。可以使用 JavaScript 将所有输入标记为 "unmodified"(例如,通过我的 "Save Changes" 按钮调用)。
你可以使用 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:-
您可以为每个 input
元素添加一个 change
事件侦听器以添加一个 class.
(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>
如果您想在提交后突出显示它,您可以使用此 class 作为选择器来添加另一个具有所需样式的选择器。
是否有内置方式(或插件)突出显示已修改的 input
元素?只要输入没有其原始值,输入就会以某种方式突出显示(例如橙色边框)。可以使用 JavaScript 将所有输入标记为 "unmodified"(例如,通过我的 "Save Changes" 按钮调用)。
你可以使用 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:-
您可以为每个 input
元素添加一个 change
事件侦听器以添加一个 class.
(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>
如果您想在提交后突出显示它,您可以使用此 class 作为选择器来添加另一个具有所需样式的选择器。