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
– Ajay2707, Commented Aug 17, 2017 at 5:04
Possible duplicate of Limit the length of input field using angular2 — user7951676
– user7951676, Commented Aug 17, 2017 at 5:06
@user7951676 anglarjs is not angular2 ! stackoverflow.com/tags/angularjs/info stackoverflow.com/tags/angular/info — Mohamed Abbas
– Mohamed Abbas, Commented Aug 17, 2017 at 5:08

georgeawg · Accepted Answer · 2017-08-17 05:42:22Z

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

Vivz · Accepted Answer · 2017-08-17 05:54:37Z

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, 2017 at 5:54

Vivz

6,6282 gold badges19 silver badges34 bronze badges

answered Aug 17, 2017 at 5:17

Ajay2707

5,8286 gold badges44 silver badges61 bronze badges

2 Comments

Ajay2707 Over a year ago

what happened, where are you stuck

Bhrungarajni Over a year ago

it is not taking anything.. After giving all these also not working

Vivz · Accepted Answer · 2017-08-17 05:57:21Z

0

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.

edited Aug 17, 2017 at 5:57

Vivz

6,6282 gold badges19 silver badges34 bronze badges

answered Aug 17, 2017 at 5:07

Deepa

1841 gold badge2 silver badges16 bronze badges

4 Comments

Bhrungarajni Over a year ago

i don have input textbox here.. in h2 tag only i must edit please help

Deepa Over a year ago

for editing you must be having any input control right ?

Bhrungarajni Over a year ago

ya but eevrything is happeneing with h2 only

Bhrungarajni Over a year ago

What you are saying is correct but these are not supporting my requirement

Vivz · Accepted Answer · 2017-08-17 06:03:34Z

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="[email protected]" 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, 2017 at 6:03

answered Aug 17, 2017 at 5:10

Vivz

6,6282 gold badges19 silver badges34 bronze badges

7 Comments

Bhrungarajni Over a year ago

this is matching my requiremenet, i need background color to be white

Vivz Over a year ago

What do you mean by background color? You dont want any border on input?

Bhrungarajni Over a year ago

Ya i need border to the editable text with white background color

Vivz Over a year ago

The inputs background is white only. I am not understanding your requirement about white background. Can u be more specific?

Bhrungarajni Over a year ago

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

|

Collectives™ on Stack Overflow

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

4 Answers 4

Custom Directive for `contenteditable` elements

The DEMO

Comments

2 Comments

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Custom Directive for contenteditable elements

Comments

2 Comments

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Custom Directive for `contenteditable` elements