AngularJS & jQuery: Splitting textarea into multiple textareas

Question

For a project I'm working on, we want to create an offer module where users can generate an offer from dynamic values. This module has a preview in html and can be downloaded as an pdf version, which is sent to a customer.

A html page is generated with all the data provided. This is done with ng-model in the view. Next we simulate multiple pages with jQuery by checking for each element if it is outside a page (each page has a min and max-height of 29,7cm). This functionality is already fixed, so we know this works.

The problem is that we want to check, when a user types in the textarea, if the textarea flows outside the page and if so, we want to cut the textarea where the overflow is happening and create a new textarea with jQuery and fill it with the remaining characters with ng-model.

We've looked into splitting all characters into an array, but no luck so far with incorporating this into the ng-model. First approach, Second approach

So the question is, is it possible to check if the overflow happens and if so, create a new textarea with the same ng-model? Any help is greatly appreciated.

Is this text that is overflowing all part of one property? If so I would simple create a directive that handles the visuals for you. Also consider using the content-editable attribute on a div instead of the textarea. — Cory Silva
– Cory Silva, Commented Feb 22, 2016 at 18:14
What exactly do you mean by part of one property? This is the structure of the textarea: <textarea rows="1" ng-model="offer.openingParagraph" id="offerOpeningParagraph" ng-trim="false">. We will be looking into content-editable attribute, thank you for the tip! — Mathijs Rutgers
– Mathijs Rutgers, Commented Feb 22, 2016 at 18:25

Raja Mohammed · Accepted Answer · 2016-02-22 19:31:40Z

1

Yes it is possible, I have created a base sample how to track the overflow and append new textarea .

Check the Fiddle

http://jsfiddle.net/88TzF/559/

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


app.directive("scrolls", function ($window) {
return {
  restrict : 'C',
  link : function(scope, element, attrs) {

  console.log(element);
    angular.element(element).bind("scroll", function() {
    console.log(this.scrollTop);
    var newarea = angular.element(document.getElementById('newarea'));
         if(this.scrollTop > 0 )
         {

          var appendTextbox= '<textarea width="200px" class="scrolls"  style="height:130px;overflow-y:scroll "></textarea>';
           newarea.append(appendTextbox);
           var childrens = newarea.children();
           var  textList = angular.element(document.getElementsByClassName('scrolls'));

           var tofocus = textList[textList.length-1];
           console.dir(textList.length);
           angular.element(tofocus).attr('autofocus','true');

         }
    });
    }
}; });

answered Feb 22, 2016 at 19:31

Raja Mohammed

2502 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathijs Rutgers Over a year ago

This is exactly what I'm looking for! Thanks a bunch, now we can try this :)

Collectives™ on Stack Overflow

AngularJS & jQuery: Splitting textarea into multiple textareas

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related