Делать это на стороне клиента намного проще и удобнее.
При рассмотрении jQuery JS Framework это так же просто, как:
$(':input').each(function() {
$(this).attr('data-original', $(this).val()).change(function() {
$(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
});
});
в сочетании с этим примером CSS:
.changed { background: #fee; }
Вот рабочий SSCCE . Скопируйте и запустите его, чтобы увидеть это сами.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3170317</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$(':input').each(function() {
$(this).attr('data-original', $(this).val()).change(function() {
$(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
});
});
});
</script>
<style>
.changed { background: #fee; }
</style>
</head>
<body>
<form>
<input value="change">
<input value="those">
<input value="inputs">
</form>
</body>
</html>
(если вы хотите, чтобы он слушал каждое нажатие клавиши вместо изменения и размытия, просто замените change
часть во 2-й строке JS на keyup
, вот живая демонстрация с использованием keyup
) * * тысяча двадцать-один