Possible to use it without v-model?

[vijaythecoder]

I have a situation where I want to use the component globally and show this keyboard component when I focus any input in the application. Right now due to link between component and input is v-model, its hard to define keyboard globally and show it when focus.

Also when I see the source file, it has not more than 40 lines of scss, do we really need scss ? due to that, we need to install scss and node-scss that brings lot of dependencies. why not use just simple css?

Thanks for the great component though, its promising

[martywallace]

For a single keyboard needing to manipulate multiple values, does something like this work for you?

<keyboard v-model="form[currentFocus]">

Then on fields:

<input @focus="currentFocus = 'name'" v-model="form.name">

If not, can you share an example of an implementation that would work for you?

As for the SCSS query, I agree with that. I will convert it to vanilla CSS :-)

[vijaythecoder]

To make your example work, I should have both in single component right? what I am looking for is I will have my keyboard component in layout.vue which holds different child routes, and the inputs are in different forms. so I can't have form object shared. or am I missing something? Thanks for the quick response though

[martywallace]

Can you add a quick pseudo-example of how you'd like it to work?

[vijaythecoder]

something like this http://project.cahnory.fr/jquery.keyboard/ it checks if I there is an active focus on any text/textarea element and then shows the keyboard. for every key I press, it dispatches a change event too. That plugin is using jquery, so I am looking for more over with pure javascript/vuejs version. Thanks for your help

[martywallace]

I see what you mean. This would mean the keyboard has a one to many relationship with input controls on the page rather than a one to one relationship with a value that it is responsible for in the application, which is a big difference.

With jQuery, binding a $('input, textarea').on('focus', event => { }) to everything on the page is the norm, but in a Vue application you would still have to manually attach an @focus="" directive to every input element for it to be semantically valid and to allow inputs inside v-if, v-for etc to work correctly anyway.

It's also important to note that in a jQuery application, every input has its own layer of state that has to then be captured manually later (e.g. when submitting a form). This allows the jQuery keyboard to change that state directly with $('input').val('new-value'). In a Vue application, mutating an input control directly does not affect the value associated with its v-model; that state is 1-1, so you need to inevitably update the v-model value anyway.

I hope that all made sense. Dispatching an event from the keyboard when it appends a character is definitely possible. Would that suit?

[martywallace]

Closing due to inactivity / lack of response.