"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

Question

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code:

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 am currently inserting the dropdown value into an Angular Editor text. However, I would like to place this value at the cursor position when I click on a dropdown value. Can anyone provide guidance on how to achieve this?

javascript css angular typescript

Answer 1

Answer №1

Imagine you have the following input:

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

To retrieve the cursor position, you can utilize this function:

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

Next, you need to create a function to update the 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 also highlight a specific range and substitute it with a selected value using the following code snippet.

Take a look at this 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>

Answer 2

Imagine you have the following input:

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

To retrieve the cursor position, you can utilize this function:

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

Next, you need to create a function to update the 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 also highlight a specific range and substitute it with a selected value using the following code snippet.

Take a look at this 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>

Answer 3

Answer №2

Simply add the phrase "as HTMLInputElement" and everything will work perfectly.

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

Answer 4

Simply add the phrase "as HTMLInputElement" and everything will work perfectly.

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

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

Answer №1

Answer №2

Similar questions

What is the most effective way to accurately identify the mobile platform of a user using JavaScript?

Error in Node Redis-OM: the function generateId of this[#schema] is not recognized

What sets apart a React component from a function-as-component in React?

What are the steps to incorporate a type-safe builder using phantom types in TypeScript?

Tips for troubleshooting errors when starting a new Angular project

Using jQuery to set the background-image on the body's after pseudo-element with CSS

Securing NextJS API Routes with API Key Authorization

Utilizing Regular Expressions to Substitute 'null' in API Data with a Custom String in JavaScript

The challenge with encoding URL in Ajax requests

When you click on the Admin Panel Side menu, the page refreshes instead of expanding the menu item

maintain ajax history during jquery redirection

Ways to identify a modification in ag-grid when there is an update in my row data while transitioning from one component to another

Learn the process of transferring data from a page to a layout in NUXT

Align a div vertically in a responsive design layout

What is preventing me from accessing the attribute of this particular entity? (Using Angular and MongoDB)

The presence of a backslash is preventing the state from transitioning to '/{username:[a-zA-Z0-9]{3,20}}' within the AngularJs UI-router

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

AgGrid's magical dropdown feature

Create a Typescript generic function that can return a variety of data types including strings, numbers, and

Tips on managing ASP .NET API's HttpResponseMessage for file downloads