CODEWITHSUNDEEP
javascripthtmlcssautofill
Travis Hoki
Travis Hoki

Reputation: 230

Input Autofill Caret Missing

The caret (blinking text input cursor thing) is missing when the form uses autocomplete.

When you click into the input field there is no caret. Once you add or remove a character from the field the autocomplete styling goes away and the cursor comes back.

There are a lot of questions and answers about removing the blue background color in autofilled forms, but I haven't found any good answers about the caret. Is there a way to get the caret to show up?

For context. I'm using Bootstrap 3.3.7 if that effects anything.

Upvotes: 7

Views: 2173

Answers (3)

Павел Михеев
Павел Михеев

Reputation: 1

I has a vue project with similar issue. The only workaround that helped is to reset autofill styles by changing input value itself and returning it back to initial.

const updateField = (field: Ref<string>) => {
    const temp = field.value

    // eslint-disable-next-line no-param-reassign
    field.value = field.value.slice(1)

    nextTick(() => {
      // eslint-disable-next-line no-param-reassign
      field.value = temp
    })
  }

 
  onMounted(() => {
    WindowHelper.window.setTimeout(() => {
      updateField(email)
      updateField(password)
    }, 300)
  })

Upvotes: 0

Kashif Azad
Kashif Azad

Reputation: 1

don't use id="email"

<input type="text" class="form-control" autocomplete="new-password" id="LoginUser" />

Upvotes: 0

Nhan Thien Ho
Nhan Thien Ho

Reputation: 9

You can try setting a caret-color to autofilled input

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   caret-color: #fff;
}

Upvotes: 0

Related Questions