Angular11/HTML - Problem with autofocus

Asked

Viewed 37 times

0

Hello, everyone. I’m having problems with autofocus. I have a login form with user and password. autofocus is in the user input. After the first login, save user and password to not need to type them again. In the next accesses, the keyboard cursor appears at the beginning of the user value, as in the image below.

cenário 1

However, when typing some value, the character is inserted at the end of the value. Example below:

cenário 2

I’d like to correct that. If possible, when typing the character, it was inserted at the beginning of the input, or, if not possible, start with the cursor at the end of the input.

I’m using Angular 11. Follow my code:

<input autofocus [(ngModel)]="usuario.name" type="text" name="name" id="name" placeholder="Insira o login">

Thanks a lot, guys.

javascript html angular form input

  • Your question was confused, but the behavior of autofocus is the same, if the field has some preset value the cursor will go to the end of the entered value.

  • In this case, the browser itself saves the login and password entered, so that you do not need to type them again. Then in the next accesses, just access the page and click on the login button. As I put autofocus in the username field, the marker starts at the beginning of the input, which already has the login saved by the browser. When typing the value, even though the marker is at the beginning, the entered value goes to the end of the input. That’s all I’d like to adjust.

  • All right, I get it, you got the attribute autocomplete enabled, so the fields already come filled by the browser with the data registered before. One of the possibilities would be to place an event input for example that the moment something is typed in the field it would clean it, because if you want to type something means that you no longer want to use that value saved previously, IE, just delete it: <input autofocus [(ngModel)]="usuario.name" type="text" (input)="usuario.name = '' " ...>

1 answer

0

I solved the problem by disabling the autocomplete this way:

<input autocomplete="new-password" [(ngModel)]="usuario.password" type="password" name="senha" id="senha" placeholder="Insira a senha">

Now the user needs to select the saved password. Thanks, guys.

Browser other questions tagged javascript html angular form input

You are not signed in. Login or sign up in order to post.