Author: John Au-Yeung

Sometimes, we want to prevent middle mouse click scrolling with JavaScript.

In this article, we’ll look at how to prevent middle mouse click scrolling with JavaScript.

How to prevent middle mouse click scrolling with JavaScript?

To prevent middle mouse click scrolling with JavaScript, we can listen to the mousedown event on the body element.

Then we check if the middle mouse button is clicked and prevent the default scrolling behavior if it is.

For instance, we write:

document.body.onmousedown = (e) => {
  if (e.button === 1) {
    e.preventDefault();
    return false;
  }
}

We set document.body.onmousedown to a function that checks if the middle mouse button is clicked.

We do that checking if e.button is 1.

If it is, then we call e.preventDefault and return false to prevent the default scrolling behavior.

Conclusion

To prevent middle mouse click scrolling with JavaScript, we can listen to the mousedown event on the body element.

Then we check if the middle mouse button is clicked and prevent the default scrolling behavior if it is.

Sometimes, we want to make a HTML5 datalist visible when focus event fires on input with JavaScript.

In this article, we’ll look at how to make a HTML5 datalist visible when focus event fires on input with JavaScript.

How to make a HTML5 datalist visible when focus event fires on input with JavaScript?

To make a HTML5 datalist visible when focus event fires on input with JavaScript, we can save the old input value on mouse move. On mouse down, we can empty the input value. And on mouse up, we set the input value to the saved input value.

For instance, we write:

<input name="input" list="input" />

<datalist id="input">
  <option value="apple" selected></option>
  <option value="orange"></option>
  <option value="grape"></option>
</datalist>

to add an input and datalist associated with the input.

Then we write:

const input = document.querySelector('input')
let old;
input.onmousemove = (e) => {
  e.target.focus()
  old = e.target.value
}

input.onmousedown = (e) => {
  e.target.value = ''
}

input.onmouseup = (e) => {
  e.target.value = old
}

to select the input and define the old variable to store the old value.

The we focus on the input and save the old value on mouse move with:

input.onmousemove = (e) => {
  e.target.focus()
  old = e.target.value
}

Then on mouse down, we empty the input value with:

input.onmousedown = (e) => {
  e.target.value = ''
}

Then on mouse up, we set the input value to the saved old value with:

input.onmouseup = (e) => {
  e.target.value = old
}

Conclusion

To make a HTML5 datalist visible when focus event fires on input with JavaScript, we can save the old input value on mouse move. On mouse down, we can empty the input value. And on mouse up, we set the input value to the saved input value.

Sometimes, we want to disable or enable submit button until all forms have been filled with JavaScript.

In this article, we’ll look at how to disable or enable submit button until all forms have been filled with JavaScript.

How to disable or enable submit button until all forms have been filled with JavaScript?

To disable or enable submit button until all forms have been filled with JavaScript, we can set the disabled property according to the input values.

For instance, we write:

<form name="theForm">
  <input type="text" />
  <input type="text"  />
  <input id="submitbutton" type="submit" disabled />
</form>

We have a form that has 2 text inputs and a submit button.

Then to enable the submit button only when all the text inputs are filled, we write:

document.onkeyup = (e) => {
  if (e.target.tagName === 'INPUT') {
    const canSubmit = [...document.forms.theForm.querySelectorAll('input[type="text"]')]
      .every(i => {
        return i.value
      })
    document.forms.theForm.querySelector('input[type="submit"]').disabled = !canSubmit
  }
}

We set the document.onkeyup function to a function that checks if the keyup event is triggered by an input element.

If it is, then we check if all the text inputs are filled with:

const canSubmit = [...document.forms.theForm.querySelectorAll('input[type="text"]')]
  .every(i => {
    return i.value
  })

Then we set the disabled attribute of the submit button with:

document.forms.theForm.querySelector('input[type="submit"]').disabled = !canSubmit

Now the submit button is only enabled when all the text inputs are filled.

Conclusion

To disable or enable submit button until all forms have been filled with JavaScript, we can set the disabled property according to the input values.

Sometimes, we want to get the child node count with JavaScript.

In this article, we’ll look at how to get the child node count with JavaScript.

How to get the child node count with JavaScript?

To get the child node count with JavaScript, we can use the childElementCount property.

For instance, we write:

<ul>
  <li>Array1</li>
  <li>Array2</li>
  <li id="element">Array3</li>
</ul>

to add a ul with some li elements.

Then we write:

const temp = document.getElementById('element').parentNode;
console.log(temp.childElementCount);

We select the li with ID element with getElementById.

Then we get the ul with parentNode.

Finally, we get the number of li’s in the ul with childElementCount.

Therefore, the console log should log 3.

Conclusion

To get the child node count with JavaScript, we can use the childElementCount property.

Sometimes, we want to mount the child components only after data has been loaded with Vue.js and JavaScript.

In this article, we’ll look at how to mount the child components only after data has been loaded with Vue.js and JavaScript.

How to mount the child components only after data has been loaded with Vue.js and JavaScript?

To mount the child components only after data has been loaded with Vue.js and JavaScript, we can use the v-if directive to check if the data is loaded before rendering the child component.

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 app container.

Then we write:

const Foo = {
  template: `<p>{{index}}</p>`,
  props: ['index']
}

const v = new Vue({
  el: '#app',
  template: `
    <div v-if='arr'>
    	<foo :key='i' :index='i' v-for='i of arr' />
    </div>
  `,
  data: {
    arr: undefined
  },
  components: {
    Foo
  },
  mounted() {
    setTimeout(() => {
      this.arr = [1, 2, 3, 4, 5]
    }, 1000)
  }
})

to add v-if to the div to see if arr is defined before we use v-for to render the array entries.

In the mounted hook, we assign this.arr to an array in the setTimeout callback, so there’s a delay until arr is assigned to the array.

Therefore, we should see a delay before Foo is rendered.

Conclusion

To mount the child components only after data has been loaded with Vue.js, we can use the v-if directive to check if the data is loaded before rendering the child component.