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

https://i.sstatic.net/0ssry.png

**But I am aiming for something like this ** https://i.sstatic.net/tB1BP.png

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

Deciphering the hidden power of anonymous functions within Express.js

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

Troubles encountered while processing STL file readers

A guide on creating and accessing a variable within a Jinja for loop

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

Oops! We encountered an issue in locating the Entry Module. The error message is indicating that it cannot find the specified source file

Inserting a variable into a JSON string

Guide to dynamically incorporating items from an array into the filter operation

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

Store and retrieve user input using JavaScript or JSON

Tips for parsing information contained in a cdata tag using python

Steps for executing a function when a directory is clicked

The selected data is not being displayed

Avoid displaying null values in SELECT and GET operations when using node-postgres

Can express-handlebars tags be utilized within an HTML script tag when on the client side?

Ways to invoke a controller function from a different controller in AngularJS

What could be preventing my logo from properly resizing with html/css?

Steps to Create an HTML Text Box that cannot be clicked

Creating semantic advertisement content using HTML5 tags

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality