How to make the content in the input box automatically move forward after deleting the cursor in JS?

When developing web applications, you often encounter scenarios where you need to operate the content of the input box. Among them, it is a common but also challenging requirement to automatically move the content in the input box forward after deleting the cursor.

In this article, we will introduce two methods to achieve this requirement: one is to use JavaScript’s Selection API to perform text operations, and the other is to automatically redirect the content in the input box to the input box by simulating keyboard events. Move forward.

Use Selection API for text operations

Selection API is a text operation API provided by JavaScript, which can be used to obtain and operate the selected text part of the document. In this method, we will use the Selection API to implement the deletion and copying of text content.

First, we need to get the DOM node of the input box and bind a keydown event listener to it to listen for keyboard events. When the user presses the Backspace or Delete key, we will perform the following operations:

1. Use the document.getSelection() method to obtain the current selected text
2. If the selected text is empty, then Represents that you want to delete a character before the cursor, reset the selection range to "extend" (that is, the text between the current cursor position and the position of the previous character) through the modify() method of the Selection API, and then use modify() again The method resets the selection range to "move" (that is, deletes the characters before the cursor)
3. Otherwise, it means that the user has selected a part of the text, copies the selected text to the clipboard, and sets the selection range to " move" to delete the selected text
4. Finally, update the value of the input box and move the cursor to the correct position

Here is a complete implementation:

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

Use simulated keyboard events to implement

The second implementation method is to trigger the keydown event of the input box by simulating keyboard events, allowing it to move forward automatically. This method does not require the use of the Selection API and works in all browsers.

First, we need to create a simulated keyboard event to simulate the user pressing the Backspace or Delete key. Next, trigger the keydown event on the input box and perform the following operations in the event listener:

1. Use the selectionStart and selectionEnd properties to obtain the currently selected text range. If no text is selected, select selectionStart and selectionEnd. Equality
2. Determine whether the key pressed by the user is Backspace or Delete. If it is Backspace, decrease selectionStart by 1, otherwise increase selectionEnd by 1
3. Update the value of the input box and based on the current cursor Position resetting selectionStart and selectionEnd

The implementation code is as follows:

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Summary

This article introduces two methods to implement JavaScript to delete the cursor and let the input box The content automatically moves forward. The first method uses JavaScript's Selection API to perform text operations, and the second method is implemented by simulating keyboard events. Both methods have their own advantages and disadvantages, choose according to actual needs and browser compatibility.

The above is the detailed content of How to make the content in the input box automatically move forward after deleting the cursor in JS?. For more information, please follow other related articles on the PHP Chinese website!