CODEWITHSUNDEEP
formsvue.js
Durdona A.
Durdona A.

Reputation: 318

How to disable only leading space in the input text field Vue JS

I have an input address field with a custom form validation. I would like to disable only the leading space when user starts typing some text

Vue JS Form

I have checked this post however, this approach disables white space completely

I have also tried using .trim() method along with .replace(/(^\s*)|(\s*$)/gi, "") still didn't work

Here is how it looks when I have leading whitespace.

Having leading whitespace doesn't let form validation error message to be displayed

Please Note my component is a child component and I am looking for a solution which can be implemented within my component.

enter image description here

Need some help

Tried this approach but it disables all spaces by default

<input 
  v-on:keydown='key'
  class="input search-city"
  type="text"
  placeholder="Street address or zip code"
  v-model="search_string"                         
/>

<script>
 methods: {
   key: function(event){
      if(event.keyCode === 32){
        event.preventDefault();
      }
    }
  }
</script>

Upvotes: 2

Views: 7407

Answers (3)

Christhofer Natalius
Christhofer Natalius

Reputation: 3398

need to disable in the input so that user's first input can be a character.

You can use custom directives.

Put this code in the file where you initiate vue

Vue.directive('disable-leading-space', { // you can rename it to your liking
    update (el) {
        // using regex to only remove spaces at the beginning
        el.value = el.value.replace(/^\s+/g, ""); // or you can use your own preferred way to remove leading spaces
        el.dispatchEvent(new Event('input'))
    }
})

and then you can use the directive like this

<input v-disable-leading-space v-model="myText">

Using directive like this makes the code to be reusable in all your vue components.

Upvotes: 3

Tebe
Tebe

Reputation: 171

Another much simpler solution:

<input v-model.trim="search_string" .....

Upvotes: 1

wildhart
wildhart

Reputation: 449

Both the .trim() method and .replace(/(^\s*)|(\s*$)/gi, "") will remove leading and trailing space from your string.

To remove just the leading white-space use .replace(/^\s*/, "")

RegEx Explanation:

  • ^\s* is any repeated (*) white space (\s) following the start (^) of the input.
  • \s*$ is any repeated (*) white space (\s) preceeding the end ($) of the input.
  • (^\s*)|(\s*$) is either of the above (| = OR)
  • the /g option is "global", so it will replace multiple occurrences of the same match (not required in this case, since we are already using \s* to match repeated consecutive whitespace characters)
  • the /i option means case-insensitive match, which is not required in this case.

Alternatively, try:

<input v-model="search_string" @keydown.space="preventLeadingSpace"/>

  methods: {
    preventLeadingSpace(e) {
      // only prevent the keypress if the value is blank
      if (!e.target.value) e.preventDefault();
      // otherwise, if the leading character is a space, remove all leading white-space
      else if (e.target.value[0]==' ') e.target.value = e.target.value.replace(/^\s*/, "");
    },
  }

Upvotes: 3

Related Questions