How to not lose input value when we get focus on it?

[KindSpidey]

Hey, guys! I am creating a page where user can set their access code for entering the app. I didnt find inputs specially for codes, so I decided to create my own custom input which is just a group of 4 inputs for each digit.

Each input has this HTML code:

<input
        type="password"
        class="access-code-digit"
        maxlength="1"
        v-model="digit1"
        id="digit1"
        :style="{ borderColor: digit1 ? '#50a8eb' : 'gray' }"
        @input="focusNextField(1)"
        inputmode="numeric"
      />

This refs and method in which I move focus to the new input after we typed in a number into current one:

import { ref } from 'vue';

  let digit1 = ref('');
  let digit2 = ref('');
  let digit3 = ref('');
  let digit4 = ref('');

  const focusNextField = (currentField) => {
    if (currentField === 1 && digit1.value.length === 1) {
      document.getElementById('digit2').focus();
    }
    else if (currentField === 2 && digit2.value.length === 1) {
      console.log('focus 3')
      document.getElementById('digit3').focus();
    }
    else if (currentField === 3 && digit3.value.length === 1) {
      console.log('focus 4')
      document.getElementById('digit4').focus();
    }
    else if (currentField === 4 && digit4.value.length === 1) {
      document.getElementById('digit4').blur();
    }

  };

This code works correctly and it does what it should: when a digit is typed in, focus moves to next input. But now I decided to create also a function that allows user to delete/backspace his code/letter and if backspace/delete pressed on an empty input form, our focus goes to previous one, meaning that user want to edit a previous one now.

For these purposes I wrote 2 functions:

  const focusPreviousField = (currentField) => {
  if (currentField === 4 && digit4.value.length === 0) {
    let current_value = digit3.value
    document.getElementById('digit3').focus();
    console.log(digit3.value, 'digit3')
  }
  else if (currentField === 3 && digit3.value.length === 0) {
    digit2.value = ''; // Update the ref value
    document.getElementById('digit2').focus();
  }
  else if (currentField === 2 && digit2.value.length === 0) {
    digit1.value = ''; // Update the ref value
    document.getElementById('digit1').focus();
  }
  else if (currentField === 1 && digit1.value.length === 0) {
    digit1.value = ''; // Update the ref value
    document.getElementById('digit1').blur();
  }
};

const handleBackspace = (event) => {
 if (event.key === "Backspace" || event.key === "Delete") {
   console.log('BACKSPACE',document.activeElement.id)
   const focusedElement = document.activeElement;
   let id= focusedElement.id;
   let number = parseInt(id.match(/\d+/)[0]);
   console.log(number);
   console.log(focusedElement.value)
   if (focusedElement.value===''){
     focusPreviousField(number)
   }
 }
};

onMounted(() => {
 document.addEventListener('keydown', handleBackspace);
});

// Remove event listener when the component is unmounted
onUnmounted(() => {
 document.removeEventListener('keydown', handleBackspace);
});

handleBackspace works fine too, as the focusPreviousField by the way. The problem starts when we call command document.getElementById('digit3').focus(); I have no idea why, but when we trying to focus on the input which already has value inside, old value just disappears and we are inside empty input form. How to fix that and what causes this problem?

[quiteeasy]

Here is an NPM module for the codes that you were looking for :) Have a look

[quiteeasy]

You can also have a look at how it is done and apply it to your app!