Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers Vue Vue Answers

How to run a function on input but with a delay with Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to run a function on input but with a delay with Vue.js and JavaScript.

In this article, we’ll look at how to run a function on input but with a delay with Vue.js and JavaScript.

How to run a function on input but with a delay with Vue.js and JavaScript?

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input @input='onInput'>
      <div v-if='!isHidden'>hello</div>
    </div>
  `,
  data: {
    isHidden: true
  },
  methods: {
    onInput() {
      setTimeout(() => this.isHidden = false, 500);
    }
  }
})

to call onInput when the input event is triggered.

In onInput, we call setTimeout with a callback that sets this.isHidden to false to unhide the div after 500 milliseconds.

We use the v-if to only show the div with isHidden is false.

Conclusion

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

Categories
JavaScript Answers

How to clone a file input element in JavaScript?

selective focus photography of seal lying on ground

Sometimes, we want to clone a file input element in JavaScript.

In this article, we’ll look at how to clone a file input element in JavaScript.

How to clone a file input element in JavaScript?

To clone a file input element in JavaScript, we can use the cloneNode method.

For instance, we write:

<input type='file'>

to add a file input.

Then we write:

const input = document.querySelector('input')
const inputClone = input.cloneNode(true)
document.body.appendChild(inputClone)

to select the file input with querySelector.

Then we call input.cloneNode with true to do a deep clone of the input and return it.

Finally, we call document.body.appendChild with inputClone to append it as a child of the body element.

Conclusion

To clone a file input element in JavaScript, we can use the cloneNode method.

Categories
JavaScript Answers

How to check for the subtract key press with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to check for the subtract key press with JavaScript.

In this article, we’ll look at how to check for the subtract key press with JavaScript.

How to check for the subtract key press with JavaScript?

To check for the subtract key press with JavaScript, we can listen to the keypress event and use the event key property to check which key is pressed.

For instance, we write:

window.onkeypress = (e) => {
  if (e.key === '-') {
    console.log('subtract pressed')
  }
}

to check if the subtract key is pressed with e.key === '-' in the window.

If it’s pressed, then we log 'subtract pressed'.

Conclusion

To check for the subtract key press with JavaScript, we can listen to the keypress event and use the event key property to check which key is pressed.

Categories
JavaScript Answers

How to cast a string to an array with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to cast a string to an array with JavaScript.

In this article, we’ll look at how to cast a string to an array with JavaScript.

How to cast a string to an array with JavaScript?

To cast a string to an array with JavaScript, we can use the spread operator.

For instance, we write:

const s = 'foo'
const arr = [...s]
console.log(arr)

to spread the characters of s into an array with the spread operator and assign the array to arr.

Therefore, arr is ['f', 'o', 'o'].

Conclusion

To cast a string to an array with JavaScript, we can use the spread operator.

Categories
JavaScript Answers

How to use a regex to get first word after slash in URL with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to use a regex to get first word after slash in URL with JavaScript.

In this article, we’ll look at how to use a regex to get first word after slash in URL with JavaScript.

How to use a regex to get first word after slash in URL with JavaScript?

To use a regex to get first word after slash in URL with JavaScript, we can call the string’s replace method.

For instance, we write:

const s = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');
console.log(s)

to call replace on the current URL with a regex that gets the first word after the slash and returns it.

Conclusion

To use a regex to get first word after slash in URL with JavaScript, we can call the string’s replace method.