Inserting text at Current Cursor position in Textarea Using AngularJs Ng-Click

Question

We are trying to implement like below requirement. Click of a button some text will be generated and it will be added into textarea. Button is using Ng-Onclick.

Button Code is below.

<input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" />

But many buttons will be there like if am adding 4 components 4 buttons will be there to generate the formula.

and Here is my TextArea Code:

 <textarea id="summarFormula" ng-model=".Summarisation" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea>

and Here is my Script.

    $scope.addToFormID = function(index){
        if( $scope.vm.SummarisationForm==null)
        {
            $scope.vm.SummarisationForm ="["+ $scope.vm.Dependencies[index].NeName+":{"+$scope.vm.Dependencies[index].DbId+","+$scope.vm.Dependencies[index].VersionId+"}]";

        }else
            $scope.vm.Summarisation+="["+ $scope.vm.Dependencies[index].Name+":{"+$scope.vm.Dependencies[index].Id+","+$scope.vm.Dependencies[index].VersionId+"}]";
        $scope.setSummarisationFormDynamic();
    }

We can see that in else part $scope.vm.SummarisationForm += so it will + the next formula to previous one so i wants to modify this one and needs to add the content where i am keeping the cursor.

Now What ever I am clicking it is adding it to the end of the content , If am entering enter key keeping cursor into first line of the next line also it is adding it to the same line which already text is there so i wants to find the cursor position and insert into the text where exactly keeping cursor or entering enter key position.

I am very new to angular js so please help me with basic idea with button how can i implement and script modification how can i do it.?

Edit : It is ASP.NET MVC5 Applicaiton.

If you need further more details please let me know.

Thanks in advance to all.

It is not clear what is the problem. And it would be nice to have the textarea html code aswell. And what is exactly setSummarisationFormula? — David H.
– David H., Commented Jul 12, 2016 at 13:25
Hi David added textarea code also, Can you please check it and explanation is I needs to add some text onclick of button click in the textarea. while inserting it is not inserting the text to cursor position where am entering or keeping mouse pointer instead of its inserting text continuous to the previous text without any space. Hope you got y point. and setSummarisationForm is another method for dynamically population this textarea text to another textbox. — Samaritan_Learner
– Samaritan_Learner, Commented Jul 12, 2016 at 13:37
When you click button doesn't your cursor disappear from textarea? How would you track the cursor position in textarea? — David H.
– David H., Commented Jul 12, 2016 at 13:39
Hi David, Yes its disappears again using mouse and keystroke enter key am keeping the cursor and setting the cursor to somewhere but it does not take the cursor point instead its again adding the text next to the previous text without any space. — Samaritan_Learner
– Samaritan_Learner, Commented Jul 12, 2016 at 13:43

Samaritan_Learner · Accepted Answer · 2019-06-28 13:09:02Z

Here is the hero which my issues was resolved. Who ever it is really great that he solved my problem.

and What exactly done is I created directive element as mentioned in this link and called that directive in my view .

Boom it worked.

http://plnkr.co/edit/Xx1SHwQI2t6ji31COneO?p=preview

app.directive('myText', ['$rootScope', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            $rootScope.$on('add', function(e, val) {
                var domElement = element[0];

                if (document.selection) {
                    domElement.focus();
                    var sel = document.selection.createRange();
                    sel.text = val;
                    domElement.focus();
                } else if (domElement.selectionStart || domElement.selectionStart === 0) {
                    var startPos = domElement.selectionStart;
                    var endPos = domElement.selectionEnd;
                    var scrollTop = domElement.scrollTop;
                    domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
                    domElement.focus();
                    domElement.selectionStart = startPos + val.length;
                    domElement.selectionEnd = startPos + val.length;
                    domElement.scrollTop = scrollTop;
                } else {
                    domElement.value += val;
                    domElement.focus();
                }
            });
        }
    }
}]);

View Calling like this,

directive name is , myText. so the code will be like in this view side.

 <textarea my-text="">

Collectives™ on Stack Overflow

Inserting text at Current Cursor position in Textarea Using AngularJs Ng-Click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related