How to Insert Text into the Textarea at the Current Cursor Position

inserting text in current (or last) caret position inside of TextArea, in Angular; Element is not interpreted as TextArea

When you're dealing with Angular you're in TypeScript world.

document.querySelector method is a generic method where by default it returns Element:

querySelector<E extends Element = Element>(selectors: string): E | null;

Simply choose the proper type and you're done:

const myTA = document.querySelector<HTMLTextAreaElement>(`#${this.BODY_TEXTAREA}`);
                                    ^^^^^^^^^^^^^^^^^^^          

How to set cursor position in a textarea where I last inserted the text?

Simply use this selectionEnd and sum with txt_to_add length

$(document).ready(function() {
  // Get current cursor position  $("#btngetcurpos").click(function() {    var cursor_pos = $("#my_textarea").prop('selectionStart');    alert(cursor_pos);    $("#my_textarea").focus();  });
  // Insert text at current cursor position  $("#btnsettxt").click(function() {    var cursor_pos = $("#my_textarea").prop('selectionStart');    var textarea_txt = $("#my_textarea").val();    var txt_to_add = "test";    $("#my_textarea").val(textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos));    $("#my_textarea").focus();    $('#my_textarea').prop('selectionEnd', cursor_pos + txt_to_add.length);
  });});

#my_textarea {  border: 1px solid red;  width: 300px;  height: 100px;  padding: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea id="my_textarea" autofocus>This is a textarea.</textarea>
<br /><br />
<input type="button" id="btngetcurpos" value="Get Cursor Position" />
<input type="button" id="btnsettxt" value="Insert Text" />

Set text-cursor position in a textarea

After refocusing the textarea with txtarea.focus(), add this line:

txtarea.selectionEnd= end + 7;

That will set the cursor seven positions ahead of where it was previously, which will take [b][/b] into account.

Example

document.getElementById('bold').addEventListener('click', boldText);
function boldText() {  var txtarea = document.getElementById("editor_area");  var start = txtarea.selectionStart;  var end = txtarea.selectionEnd;  var sel = txtarea.value.substring(start, end);  var finText = txtarea.value.substring(0, start) + '[b]' + sel + '[/b]' + txtarea.value.substring(end);  txtarea.value = finText;  txtarea.focus();  txtarea.selectionEnd= end + 7;}

#editor_area {  width: 100%;  height: 10em;}

<button id="bold">B</button><textarea id="editor_area"></textarea>

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

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=""> 

Inserting text after cursor position in text area

You may checkout this answer. The insertAtCaret jquery plugin seems very nice.

Insert a string in a textarea at cursor position with some changes

Try this function

// We've extended one function in jQuery to use it globally.$(document).ready(function(){    jQuery.fn.extend({insertAtCaret: function(myValue){  return this.each(function(i) {    if (document.selection) {      //For browsers like Internet Explorer      this.focus();      var sel = document.selection.createRange();      sel.text = myValue;      this.focus();    }    else if (this.selectionStart || this.selectionStart == '0') {      //For browsers like Firefox and Webkit based      var startPos = this.selectionStart;      var endPos = this.selectionEnd;      var scrollTop = this.scrollTop;      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);      this.focus();      this.selectionStart = startPos + myValue.length;      this.selectionEnd = startPos + myValue.length;      this.scrollTop = scrollTop;    } else {      this.value += myValue;      this.focus();    }  });}});

    $('#spanString').val("");$("span").click(function(){        $('#spanString').insertAtCaret("? " + $("#"+this.id).html());});$('button').click(function(){    $('#spanString').insertAtCaret( '12365' );})});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span class="spanClass" id="span1">String1</span><span class="spanClass" id="span2">String2</span><span class="spanClass" id="span3">String3</span><span class="spanClass" id="span4">String4</span><span class="spanClass" id="span5">String5</span><span class="spanClass" id="span6">String6</span>

<textarea id="spanString"></textarea>

---

Related Topics