JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Load AngularJS library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">

<textarea id="myTextarea" ng-model="textValue" ng-change="inputChanged()" ng-init="textValue='My starting text'">{{textValue}}</textarea>
<input type="button" value="Submit" ng-click="submit()" ng-disabled="!changed">

<script>
  angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.inputChanged = function() {
      var currentValue = $scope.textValue;
      console.log('Current value:', currentValue);
      
      // Detecting text deletion
      if ($scope.oldValue !== undefined && currentValue.length < $scope.oldValue.length) {
        console.log('Text was deleted');
      }
      
      $scope.oldValue = currentValue;
      $scope.changed = (currentValue !== 'My starting text');

      // Check if focus needs to be blurred
      if (!$scope.changed) {
        document.getElementById('myTextarea').blur();
      }
    };
    
    $scope.submit = function() {
      // Implement your submit logic here
      console.log('Submitting...');
      $scope.changed = false;
    };
  }]);
</script>

</body>
</html>