Category: JavaScript

Sometimes, we want to check if keyup is a character key with jQuery.

In this article, we’ll look at how to check if keyup is a character key with jQuery.

How to check if keyup is a character key with jQuery?

To check if keyup is a character key with jQuery, we can check the keypress event.

For instance, we write:

<input>

to add an input.

Then we write:

$("input").keypress((e) => {
  if (e.which !== 0) {
    console.log("Character was typed", String.fromCharCode(e.which));
  }
});

to select the input with $.

Then we call keypress with the event handler that checks the character code of the key that’s pressed with e.which.

If it’s not 0, then we pressed a character key.

And we get the character code with String.fromCharCode with the character code from e.which.

Conclusion

To check if keyup is a character key with jQuery, we can check the keypress event.

Sometimes, we want to dynamically add options to an existing select in JavaScript.

In this article, we’ll look at how to dynamically add options to an existing select in JavaScript.

How to dynamically add options to an existing select in JavaScript?

To dynamically add options to an existing select in JavaScript, we can use a new Option object append it to the select element with the options.add method.

For instance, we write:

<select>

</select>

to add a select element.

Then we write:

const select = document.querySelector('select');
select.options.add(new Option('Text 1', 'Value1'))

to select the select element with document.querySelector.

Then we call select.options.add with the Option instance to add the option.

We pass in the option text and the value of the value attribute respectively to the Option constructor.

Conclusion

To dynamically add options to an existing select in JavaScript, we can use a new Option object append it to the select element with the options.add method.

Sometimes, we want to detect if user changes tab with JavaScript.

In this article, we’ll look at how to detect if user changes tab with JavaScript.

How to detect if user changes tab with JavaScript?

To detect if user changes tab with JavaScript, we can listen to the visibilitychange event on document.

For instance, we write:

document.addEventListener("visibilitychange", event => {
  if (document.visibilityState === "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
})

We call document.addEventListener window 'visibilitychange' to listen to the visibilitychange event.

In the event handler, we check if document.visibilityState is 'visible'.

If that’s true, then the tab is active.

Otherwise, it’s not.

Conclusion

To detect if user changes tab with JavaScript, we can listen to the visibilitychange event on document.

Sometimes, we want to delay a jQuery script until everything else has loaded.

In this article, we’ll look at how to delay a jQuery script until everything else has loaded.

How to delay a jQuery script until everything else has loaded?

To delay a jQuery script until everything else has loaded, we can call the $(window).bind method with a callback that runs when everything has been loaded.

For instance, we write;

$(window).bind("load", () => {
  console.log('loaded')
});

We call bind with 'load' to listen to the load event on window.

Then when that event is emitted, we call the callback to log 'loaded'.

Conclusion

To delay a jQuery script until everything else has loaded, we can call the $(window).bind method with a callback that runs when everything has been loaded.

Sometimes, we want to delete the default value of an input text on click with JavaScript.

In this article, we’ll look at how to delete the default value of an input text on click with JavaScript.

How to delete the default value of an input text on click with JavaScript?

To delete the default value of an input text on click with JavaScript, we can set the value of the input to the default by setting the value attribute and using the defaultValue property.

For instance, we write:

<input type="text" value="[some default value]" />

to set the value attribute to set the defaultValue property of the input.

Then we write:

const onBlur = (e) => {
  if (e.target.value === '') {
    e.target.value = e.target.defaultValue;
  }
}
const onFocus = (e) => {
  if (e.target.value === e.target.defaultValue) {
    e.target.value = '';
  }
}

const input = document.querySelector('input')
input.addEventListener('focus', onFocus)
input.addEventListener('blur', onBlur)

to add the onBlur and onFocus functions which runs when we focus away and in the input respectively.

In the onBlur function. we set the value of the input to the defaultValue.

And in onFocus, we set the input’s value to an empty string if it’s the same as the defaultValue.

e.target is the input since we call addEventListener on the input that we selected with document.querySelector.

Conclusion

To delete the default value of an input text on click with JavaScript, we can set the value of the input to the default by setting the value attribute and using the defaultValue property.