How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Question

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic.

I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page. I achieve this by using event.preventDefault() on the mousedown event.

const input = document.querySelector('input')

function toggleVisibility() {
  if (input.type === "text")
    input.type = "password"
  else
    input.type = "text"
}

function keepFocus(event) {
  event.preventDefault()
}

<input placeholder="Password" type="text">
<button onmousedown="keepFocus(event)" onclick="toggleVisibility()">Show Password</button>

Issue

After switching the input field type, the cursor jumps back to the beginning of the input field. I would like to retain the cursor position as it was before the change. (Similar to the behavior on PayPal)

javascript html css reactjs forms

Answer 1

Answer №1

Upon reviewing the code provided by PayPal, it is evident that the functionality can be achieved by simply calling input.focus() within a single event-listener:

      function hidePassword(e) {
          if (baseType === 'tel') {
              $(field).addClass('tel-password');
          } else {
              field.setAttribute('type', 'password');
          }
          $(btnShow).removeClass('hide');
          $(btnHide).addClass('hide');
          field.focus();
          e.stopPropagation();

          login.logger.log({
              evt: 'is_pwd_sh',
              data: 'N',
              instrument: true
          });
          login.logger.pushLogs();
      }

My modified example below streamlines this process with some adjustments:

It is recommended to set the default type="" as password. This ensures that users do not accidentally reveal their password while typing in public settings such as screen-sharing or giving presentations.
The use of embedding the target
```
<input type="password" />
```
within
```
<button data-for="" />
```
eliminates potential issues caused by early calls to querySelector or getElementById before the DOMContentLoaded event.
Unnecessary calls to event.stopPropagation() or event.preventDefault() should be avoided. The focus should solely be on invoking input.focus() in conjunction with changing the HTMLInputElement.type property.
Avoid using onmousedown with buttons as it limits interactions. Instead, rely on the more versatile 'click' event for various user inputs like mouse, keyboard, and touch-based actions.

In summary, here is a simplified version of the script:

function toggleVisibilityOnClick( event ) {
    
    const button = event.currentTarget;
    const input = document.getElementById( button.dataset['for'] );
    if( !input ) throw new Error( "Couldn't find password input." );
    
    if( input.type === 'text' ) {
        input.type = 'password';
    }
    else {
        input.type = 'text';
    }

    input.focus();
}

<input placeholder="Password" type="password" id="pwdInp" />
<button data-for="pwdInp" onclick="toggleVisibilityOnClick(event)">Show Password</button>

If using Microsoft's browsers which support -ms-reveal, the toggle becomes redundant, and therefore should be hidden under these circumstances:

@supports selector(::-ms-reveal) {
    
    input[type="password"] + button[data-for] {
        display: none;
    }
}

Answer 2

Upon reviewing the code provided by PayPal, it is evident that the functionality can be achieved by simply calling input.focus() within a single event-listener:

      function hidePassword(e) {
          if (baseType === 'tel') {
              $(field).addClass('tel-password');
          } else {
              field.setAttribute('type', 'password');
          }
          $(btnShow).removeClass('hide');
          $(btnHide).addClass('hide');
          field.focus();
          e.stopPropagation();

          login.logger.log({
              evt: 'is_pwd_sh',
              data: 'N',
              instrument: true
          });
          login.logger.pushLogs();
      }

My modified example below streamlines this process with some adjustments:

It is recommended to set the default type="" as password. This ensures that users do not accidentally reveal their password while typing in public settings such as screen-sharing or giving presentations.
The use of embedding the target
```
<input type="password" />
```
within
```
<button data-for="" />
```
eliminates potential issues caused by early calls to querySelector or getElementById before the DOMContentLoaded event.
Unnecessary calls to event.stopPropagation() or event.preventDefault() should be avoided. The focus should solely be on invoking input.focus() in conjunction with changing the HTMLInputElement.type property.
Avoid using onmousedown with buttons as it limits interactions. Instead, rely on the more versatile 'click' event for various user inputs like mouse, keyboard, and touch-based actions.

In summary, here is a simplified version of the script:

function toggleVisibilityOnClick( event ) {
    
    const button = event.currentTarget;
    const input = document.getElementById( button.dataset['for'] );
    if( !input ) throw new Error( "Couldn't find password input." );
    
    if( input.type === 'text' ) {
        input.type = 'password';
    }
    else {
        input.type = 'text';
    }

    input.focus();
}

<input placeholder="Password" type="password" id="pwdInp" />
<button data-for="pwdInp" onclick="toggleVisibilityOnClick(event)">Show Password</button>

If using Microsoft's browsers which support -ms-reveal, the toggle becomes redundant, and therefore should be hidden under these circumstances:

@supports selector(::-ms-reveal) {
    
    input[type="password"] + button[data-for] {
        display: none;
    }
}

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Answer №1

Similar questions

Enhance the worth of text box

Exploring the Firebase authentication and implementing public and private routing in a React project

The response from Axios in NodeJs is displaying incorrect encoding

Ensuring a @keyframe animation remains constant for the entire duration of the user's visit to the webpage using CSS

Modify data in a table using Dialog Component in Angular Material

The Electron/React/Typescript module is missing: Error: Unable to locate 'fs' in the /node_modules/electron directory

Angular2: the setTimeout function is executed just a single time

Exploring the plane intersection within a 3D object using Three.js

Learn the steps for filling the color area between two points in HighCharts

Guide to implementing personalized validation for an angular component

`In NodeJS, facing a challenge with implementing a many-to-many relationship using Sequelize's

Is utilizing both an HTTP-only cookie and a token an ideal combination for enhancing security

Utilizing Material UI with React Router to create a navigational menu with NavLink

Send all requests made to /api/.. to express

What is the best way to implement conditional styling in Vue.js?

How can I retrieve the children of a component in React?

Error: Unable to locate module: 'cats.png' in the '/public/img' directory within Next.js

transferring the value of a textbox into another textbox

Challenges encountered with using TinyMce in Meteor React, specifically when working on iPad devices

Steps for setting the value of a textbox within a bootstrap popover