How I can Insert text at cursor position using angular-editor

Question

I want to add selected value from dropdown to be displayed in text box at position cursor is present. I'm using .

enter code selectChangeHandler(event: any) {
this.selectedID = event.target.value;
// console.log("this.selectedID", this.selectedID);
this.arrayfordynamic += `<div>{{DV.Product.${this.selectedID}}}</div>`
console.log("this.arrayfordynamic", this.arrayfordynamic)
this.productDiscriptionArrayForID = `<div>${this.arrayfordynamic} </div> ${this.product.productDescription}`
// console.log("this.selectedIDwithDiscription-----", this.arrayfordynamic);
this.productForm.controls.des.setValue(this.productDiscriptionArrayForID);
}

I'm setting dropdown value into the angular-editor text. But I wan't to set this value at cursor position when I click on dropdown value. Please let me know how we can do that.

Mahdi Zarei · Accepted Answer · 2021-12-02 12:15:20Z

2

Let's say this is your input:

<input id="myInput"type="text">

You can get position by this function:

function getCursor() {
  let cursor = document.getElementById('myInput');
  let start = cursor.selectionStart;
  let end = cursor.selectionEnd;
  return [start, end];
}

Now you have to write a function to patch value:

function patchValue(selectedValue) {
  let currentValue = document.getElementById('myInput').value;
  let cursor = getCursor();
  let patchedValue = currentValue.substr(0, cursor[0]) + selectedValue + currentValue.substr(cursor[1]);
  document.getElementById('myInput').value = patchedValue;
}

You can even select a range and replace that range with your selected value with this code.

Here's an example:

function getCursor() {
  let cursor = document.getElementById('myInput');
  let start = cursor.selectionStart;
  let end = cursor.selectionEnd;
  return [start, end];
}

function patchValue() {
  let currentValue = document.getElementById('myInput').value;
  let cursor = getCursor();
  let patchedValue = currentValue.substr(0, cursor[0]) + document.getElementById('myPatch').value+ currentValue.substr(cursor[1]);
  document.getElementById('myInput').value = patchedValue;
}

<label>patch:</label><input id="myPatch"type="text">
<br>
<label>input:</label><input id="myInput"type="text">
<br>
<button onclick="patchValue()">patch</button>

edited Dec 2, 2021 at 12:15

answered Dec 2, 2021 at 12:06

Mahdi Zarei

7,7538 gold badges36 silver badges67 bronze badges

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

4 Comments

Swapnali Botre Over a year ago

Property 'selectionStart' does not exist on type 'HTMLElement'. getting this error. Did I need to import something for solving that error

Mahdi Zarei Over a year ago

I have to see the code. but if you follow the snippet logic you will not have any issues.

Swapnali Botre Over a year ago

I already shared code above

Swapnali Botre Over a year ago

` getCursor() { let cursor = document.getElementById('f2'); let start = cursor.selectionStart; let end = cursor.selectionEnd; return [start, end]; }`

Felipe Sotomayor · Accepted Answer · 2022-07-20 14:56:56Z

1

Add "as HTMLInputElement" to it and everything works perfect.

 getCursor() {
    let cursor = document.getElementById('texto-value') as HTMLInputElement;
    let start = cursor.selectionStart;
    let end = cursor.selectionEnd;
    return [start, end];
  }

edited Jul 20, 2022 at 14:56

answered Jul 13, 2022 at 18:21

Felipe Sotomayor

112 bronze badges

1 Comment

ahuemmer Over a year ago

Welcome to SO. Please note, that this is the English-only version of the site. You'll find the Spanish site at es.stackoverflow.com.

Collectives™ on Stack Overflow

How I can Insert text at cursor position using angular-editor

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related