Requirement scenario: As shown below, you want to be able to insert the word pack name at the cursor position when clicking on an item in the dynamic word pack.

This is version optimization problem, original title is to allow a add a dynamic word package directly spell behind the current input box of the existing text, such as: to add a hello beauty} {handsome boy my name is tong pak fu, need to input “hello”, and click {hotties}, then input “my name is tong pak fu.

Of course, the business department feels that it can only add one headline at a time, and that adding a word pack is such a hassle… Blah blah blah… We can’t. Optimize.

We really want to do three things: fairness, fairness, and ™ fairness. 1. Get the cursor position in the text box/text field. 2. Insert a string at the position of the cursor. 3. If possible, replace the selected text directly with the desired string.

DOM operations have an API for getting the start and end positions of selected text in a text box or text field.

el.selectionStart  // The starting position of selected text in an input box or text field
el.selectionEnd    // The end position of selected text in an input box or text field
Copy the code

El is our input field or text field

<template>
    <div>
        <el-input id="inputArea" v-model="inputValue"></el-input>
    </div>
</template>
Copy the code
    let el = document.querySelector("#inputArea");
    let start = el.selectionStart; // This is the current position of the cursor (index of the character in the string)
Copy the code

Step 2: Insert the string we want to insert (such as {region}) into the cursor position.

 // Cut the input field into an array for subsequent operations
let inputValueArr = this.inputValue.split(' '); 
 // Get the length of the selected text (can be used to replace the selected text later)
let selectLength = el.selectionEnd - el.selectionStart;
 // Insert/replace (value. Name is the string to insert/replace)
inputValueArr.splice(el.selectionStart, selectLength, ` {${val.name}} `);
// Convert the array back to a string and assign a value
this.inputValue = inputValueArr.join(' ');
this.input(this.inputValue);
Copy the code

We’ve actually done 2 and 3 by this point. We can either insert a string at the cursor position or replace the selected string in the input box with the desired string. However, another problem was found during debugging: when there are multiple locations in the page that need to operate in this way, because we have the same ID, there will be an insert problem: we can’t get the cursor position correctly.

Because I am here is made form components, form page and use many times I came to this components, each component in the input id is the same, so if you have encountered a similar situation and I, can generate a random number or timestamp joining together an id, ensure each component within the input id is unique.

I this method may be more stupid, you may have a better way to achieve, welcome advice, thank ~