Menu
I have a component called TextInput.vue, and inside I created a div.
<div ts-text-input :ts-text-input-filled="setFilledAttribute && !!value" :ts-text-input-not-valid="!valueValid"> <input :value="value" @input="setValue" @keyup.enter="enterClicked" :placeholder="placeholder" :title="title"> what I wanted to do now is that to disable some spaces inside the input box so that the user is unable to type in with spaces/spacebar (like, e.g., username input box)
Here is what I have done; I try to use the function trim(), but it seems I can't still fix it.
in the computed function
computed: { value: function() { const {valueGetter, valueGetterOptions} = this, getter = this.$store.getters[valueGetter]; value.trim(); return valueGetterOptions ? getter(valueGetterOptions) : getter; }, Any hints would be helpful. thanks. (sorry for my bad English)
933
Handle the KeyPress event for this textBox and put a single condition like. Here textBox1 is your textbox. This code will prevent user to enter space at begining of TextBox. Then You need to check first character of TextBox whether it's a space or not.
you can use the onkeypress event of the input tag to react to keypresses. While appending text at the end it would be easy: just cancel the keypress event in case there is already a space at the end of the text field, but since you may also be editing inside an existing text string you better use the onkeyup event.
You can directly prevent that the user adds a white space to your input field. preventDefault() tells the user agent that the default action should not be taken as it normally would be.
<input @keydown.space="(event) => event.preventDefault()"> Or to make it even shorter (as Sovalina pointed out):
<input @keydown.space.prevent> @keydown.native.space didn't work for me. @keydown.native.space.prevent did.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
