contenteditable -- Utilizing AngularJS to create a block element for the title only

Question

contenteditable -- Utilizing AngularJS to create a block element for the title only

When I click on an input field that is editable, I want the background color to change to white within the box. Can someone please assist me with this?

Below is my code:

HTML

<div id="section{{section.index}}">
    <h2 class="title" contenteditable="true" ng-model="section.title"
        onclick="document.execCommand('selectAll',false,null)"
        ng-keydown="disable_enter($event)"
        ng-change="check_section_title($index)"
        maxlength="40">
    </h2>
</div>

The current output looks like this

**But I am aiming for something like this **

javascript html css angularjs contenteditable

Answer 1

Answer №1

Creating a Unique Directive for Contenteditable Elements

If you want to enable a contenteditable element to work with the ng-model directive and the ngModelController:

 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!
 </div>

You can create a custom directive like this:

  app.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Define how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // Remove any leftover <br> when clearing content editable
          // Strip out <br> if "strip-br" attribute is present
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

Check Out the DEMO

angular.module('app', ['ngSanitize'])
.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Define how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // Remove any leftover <br> when clearing content editable
          // Strip out <br> if "strip-br" attribute is present
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
}])

  <script src="//unpkg.com/angular/angular.js"></script>
  <script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<body ng-app="app">
  <form name="myForm">
 <p>Click on below div to edit</p>
 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent" aria-label="Dynamic textarea"></textarea>
</form>
</body>

Want to learn more? Take a look at AngularJS ngModelController API Reference - Custom Control Example

Answer 2

Creating a Unique Directive for Contenteditable Elements

If you want to enable a contenteditable element to work with the ng-model directive and the ngModelController:

 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!
 </div>

You can create a custom directive like this:

  app.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Define how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // Remove any leftover <br> when clearing content editable
          // Strip out <br> if "strip-br" attribute is present
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

Check Out the DEMO

angular.module('app', ['ngSanitize'])
.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Define how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // Remove any leftover <br> when clearing content editable
          // Strip out <br> if "strip-br" attribute is present
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
}])

  <script src="//unpkg.com/angular/angular.js"></script>
  <script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<body ng-app="app">
  <form name="myForm">
 <p>Click on below div to edit</p>
 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent" aria-label="Dynamic textarea"></textarea>
</form>
</body>

Want to learn more? Take a look at AngularJS ngModelController API Reference - Custom Control Example

Answer 3

Answer №2

Take a look at this example that shows you how to achieve both setting the maximum length and changing the color when the textbox is selected.

You can utilize ng-maxlength="3" along with a specific class to highlight the maximum length.

http://jsfiddle.net/gabrielmaldi/5o1uxnx8/

http://jsfiddle.net/ksevksev/YWq7g/

Answer 4

Take a look at this example that shows you how to achieve both setting the maximum length and changing the color when the textbox is selected.

You can utilize ng-maxlength="3" along with a specific class to highlight the maximum length.

http://jsfiddle.net/gabrielmaldi/5o1uxnx8/

http://jsfiddle.net/ksevksev/YWq7g/

Answer 5

Answer №3

It's recommended to use the maxlength attribute in your input control instead of div or h1 tags.

For Angular version 1, you can use the following:

<input type="text" ng-maxlength="40" />

For Angular version 2, you can use:

<input type="text" [maxlength]="40" />

JS Code :

document.getElementById("myInput").style.backgroundColor = "lightblue";
   function changeColor() { 
   var textBoxLength = document.getElementById('myInput').value.length;
  if(textBoxLength >= 5){
    document.getElementById("myInput").style.backgroundColor = "white";
  }    
  }

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
  <body ng-app="">
    <form name="myForm">
      <h1>Type in textbox</h1>
      <input name="myInput" id="myInput" ng-model="myInput" ng-maxlength="5" onkeypress="changeColor()">
      <h1 ng-if="!myForm.myInput.$valid">The value is too long</h1>
    </form>
  </body>
</html>

In the above code, the background color is initially set to lightblue and changes to white when characters exceed 5. However, in your case, it should be set to 40.

Answer 6

It's recommended to use the maxlength attribute in your input control instead of div or h1 tags.

For Angular version 1, you can use the following:

<input type="text" ng-maxlength="40" />

For Angular version 2, you can use:

<input type="text" [maxlength]="40" />

JS Code :

document.getElementById("myInput").style.backgroundColor = "lightblue";
   function changeColor() { 
   var textBoxLength = document.getElementById('myInput').value.length;
  if(textBoxLength >= 5){
    document.getElementById("myInput").style.backgroundColor = "white";
  }    
  }

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
  <body ng-app="">
    <form name="myForm">
      <h1>Type in textbox</h1>
      <input name="myInput" id="myInput" ng-model="myInput" ng-maxlength="5" onkeypress="changeColor()">
      <h1 ng-if="!myForm.myInput.$valid">The value is too long</h1>
    </form>
  </body>
</html>

In the above code, the background color is initially set to lightblue and changes to white when characters exceed 5. However, in your case, it should be set to 40.

Answer 7

Answer №4

It is not recommended to use ng-model on an h2 tag in AngularJS. Instead, you can pair an input field with the h2 tag and toggle their visibility. You can limit the input character count to 40 using the maxlength attribute and set up validations with ng-maxlength.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.val={};
  $scope.val.type="Hello";
  $scope.contenteditable=false; 
  $scope.check_section_title = function() {
         $scope.contenteditable=!$scope.contenteditable;  
        };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7d8d1c3dad7c498dcc5f687988398ce">[email protected]</a>" data-semver="1.5.11"></script>
</head>

<body ng-controller="MainCtrl">
    <form name="myForm" novalidate>
        <div style="padding: 10px">
        <div id="section{{section.index}}">
    <h2 class="title" ng-click="check_section_title()"  ng-if="!contenteditable">{{val.type}}</h2>
</div>
            <input name="Hazmat" ng-model="val.type" maxlength="40" ng-maxlength="40" required ng-if="contenteditable" ng-blur="check_section_title()">
        </div>
    </form>
</body>

</html>

Answer 8

It is not recommended to use ng-model on an h2 tag in AngularJS. Instead, you can pair an input field with the h2 tag and toggle their visibility. You can limit the input character count to 40 using the maxlength attribute and set up validations with ng-maxlength.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.val={};
  $scope.val.type="Hello";
  $scope.contenteditable=false; 
  $scope.check_section_title = function() {
         $scope.contenteditable=!$scope.contenteditable;  
        };
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7d8d1c3dad7c498dcc5f687988398ce">[email protected]</a>" data-semver="1.5.11"></script>
</head>

<body ng-controller="MainCtrl">
    <form name="myForm" novalidate>
        <div style="padding: 10px">
        <div id="section{{section.index}}">
    <h2 class="title" ng-click="check_section_title()"  ng-if="!contenteditable">{{val.type}}</h2>
</div>
            <input name="Hazmat" ng-model="val.type" maxlength="40" ng-maxlength="40" required ng-if="contenteditable" ng-blur="check_section_title()">
        </div>
    </form>
</body>

</html>

contenteditable -- Utilizing AngularJS to create a block element for the title only

Answer №1

Creating a Unique Directive for Contenteditable Elements

Check Out the DEMO

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate a popup triggered by a specific class (highly probable)

Utilize Puppeteer for Web Scraping to Extract Products with an Array of Images

Improper headings can prevent Chrome from continuously playing HTML5 audio

Responsive CSS design that adjusts to fit the content

How to Access a div from another website using jQuery

Invoke a Python function from JavaScript

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

React and Express failing to display content

Is it possible to eliminate the port number in Angular 7?

Unable to transfer data successfully from popup to extension.js

Change the color of the plotly button when it is clicked

Unable to conceal a div element on mobile devices

An error was encountered: The object 'object object' does not have the 'on' method available

Guide to configuring Winston logging with Sequelize correctly

Oops, it seems like the project is missing a `pages` directory. Please kindly create one in the project root. Thank you!

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Type inference in TypeScript with transitivity

Extracting information from within Ajax's Jsonp

Are the events objects failing to render or is the scope not being broadcasted properly

Streamline event listeners with a pair of attributes