contenteditable -- How to make only the title to be in block using angularjs

Question

I have a input field which is editable, when I click on that it must give background color as white with in box. Please help me.

I am sharing my code here:

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>

I am getting like this

**But i need like this **

do you want via jquery or angular js function this. are you try max-length of html or ng-maxlength for angular prospective — Ajay2707, Aug 17 '17 at 05:04
Possible duplicate of [Limit the length of input field using angular2](https://stackoverflow.com/questions/40284869/limit-the-length-of-input-field-using-angular2) — user7951676, Aug 17 '17 at 05:06
@user7951676 anglarjs is not angular2 ! https://stackoverflow.com/tags/angularjs/info https://stackoverflow.com/tags/angular/info — Mohamed Abbas, Aug 17 '17 at 05:08
Possible duplicate of [Content-Editable in the angular js](https://stackoverflow.com/questions/45570363/content-editable-in-the-angular-js/45579672#45579672). — georgeawg, Aug 17 '17 at 05:41

score 0 · Answer 1 · edited Aug 17 '17 at 05:57

You should use maxlength to your input control instead of div or h1 tags.

Use something like this if you using angular version 1

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

Use something like this if you using angular2

<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, i am setting background to lightblue initially , and changing it to white while the characters go beyond 5. but in your case it should be 40.

i don have input textbox here.. in h2 tag only i must edit please help — Bhrungarajni, Aug 17 '17 at 05:19
What you are saying is correct but these are not supporting my requirement — Bhrungarajni, Aug 17 '17 at 05:57

Vivz · Answer 2 · 2017-08-17T06:03:34.240

0

You cannot use ng-model on h2 tag. You can use an input in conjunction with the h2 tag. Hide the h2 tag on click and enable the input. You can use maxlength to limit the characters to 40 and use ng-maxlength for validations

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="angular.js@1.5.x" 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>

edited Aug 17 '17 at 06:03

answered Aug 17 '17 at 05:10

Vivz

6,625
2
17
33

this is matching my requiremenet, i need background color to be white – Bhrungarajni Aug 17 '17 at 05:31
What do you mean by background color? You dont want any border on input? – Vivz Aug 17 '17 at 05:32
Ya i need border to the editable text with white background color – Bhrungarajni Aug 17 '17 at 05:37
The inputs background is white only. I am not understanding your requirement about white background. Can u be more specific? – Vivz Aug 17 '17 at 05:39
no errors.. Actually my text box is with blue in color if i click on title for editing it must give white bg color and text must be limited to 40 characters – Bhrungarajni Aug 17 '17 at 05:50
@Tulsi I have updated my answer with ng-class to make background of input white. Check if it is working now. – Vivz Aug 17 '17 at 06:00
Why is your background blue? Maybe try using !important on white bg. – Vivz Aug 17 '17 at 06:04

score 0 · Answer 3 · edited Aug 17 '17 at 05:54

0

Check this example which give you both your solution max length as well as color changing when textbox selected.

You can use ng-maxlength="3" as well as class to highlight the maxlength comes.

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

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

edited Aug 17 '17 at 05:54

Vivz

6,625
2
17
33

answered Aug 17 '17 at 05:17

Ajay2707

5,690
6
40
58

what happened, where are you stuck – Ajay2707 Aug 17 '17 at 05:54
it is not taking anything.. After giving all these also not working – Bhrungarajni Aug 17 '17 at 06:06

score 0 · Answer 4 · answered Aug 17 '17 at 05:42

Custom Directive for `contenteditable` elements

To make a contenteditable element work with the ng-model directive and the ngModelController:

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

Create a custom directive:

  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

        // Specify 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();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if (attrs.stripBr && html === '<br>') {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

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

        // Specify 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();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          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>

For more information, see AngularJS ngModelController API Reference - Custom Control Example

contenteditable -- How to make only the title to be in block using angularjs

4 Answers4

Custom Directive for contenteditable elements

The DEMO

Custom Directive for `contenteditable` elements