0

I need to focus all the form user inputs onCreate(), so to make clear to the user that he can edit the fields if he needs to.

The closer thing I found is something like:

<input ref="email" />
const input = this.$refs.email
methods: {
 focusInput() {
 this.$refs.email.focus();
}

That should work, but I was looking for a better way to do it, without applying the ref attribute to every single input. Is there a way to wrap them all at once?

I tried attaching the ref to the form <b-form ref="focusInputs">, then, in the method, access the inputs through it 

focusInputs() {
  this.$refs.focusInputs.input.focus();
}

and call it in created:

created(){
 this.focusInputs()
}

But in the console I got:

Error in created hook: "TypeError: Cannot read property 'input' of undefined"

I think that's because I am using bootstrap-vue, so the input tags are <b-form> and <b-form-input> (instead of just <form> and <input>). CSS and Javascript, as far as I know, are not able to access these tags as the can with form or input. So, do you think is there still a way to wrap them all, or do I need to mark them singularly (either with a class or with ref). Anyone know? Thank you, x

the_flucs
  • 217
  • 1
  • 6
  • 21
  • 1
    What do you mean with "focus ALL inputs"? Only one element can have focus at a time – Hiws Sep 12 '19 at 09:11
  • Ah, didn't know that.... I wanted to focus all of them to make clear to the user that he can edit them... But maybe it's not necessary... – the_flucs Sep 12 '19 at 09:48
  • 1
    If you want user to see that he can edit something - you can use something like `box-shadow`, `border` or `outline` css-properties to highlight those fileds. – Daniyal Lukmanov Sep 12 '19 at 09:57
  • Thank you, that could be an idea, is there a way those css style are gone when the user leaves that input? – the_flucs Sep 12 '19 at 10:01
  • Since you're using bootstrap-vue (depending on version) you can use the `autofocus` on the input you want to get focused. – Hiws Sep 12 '19 at 10:01

1 Answers1

0

You can create a css class that will apply the bootstrap textbox highlight color to any textboxes you want. The below CSS should do the trick. You can find this CSS in the bootstrap files, I just changed the name and removed the focus requirement.

You cannot however actually "Focus" multiple fields since focus is where the input cursor is set. You can only auto focus one field at a time.

.fillable{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
Scornwell
  • 597
  • 4
  • 19