How to stop scrolling child div from scrolling the window with JavaScript?

To stop scrolling child div from scrolling the window with JavaScript, we set the overflow property dynamically.

For instance, we write

<div
  onmouseover="document.body.style.overflow = 'hidden';"
  onmouseout="document.body.style.overflow = 'auto';"
></div>

to set the onmouseover property to set the document.body.style.overflow property to 'hidden' when we move our mouse into the div.

And we set the document.body.style.overflow property to 'auto' when we move our mouse away from the div.

How to detect when position: sticky is triggered with JavaScript?

To detect when position: sticky is triggered with JavaScript, we use the intersection observer.

For instance, we write

const stickyElm = document.querySelector("header");

const observer = new IntersectionObserver(
  ([e]) => e.target.classList.toggle("isSticky", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(stickyElm);

to create a new IntersectionObserver object by calling it with a callback and an object.

The callback is called if the element we’re watching has intersected with the edge of the browser tab or window.

In it, we call classList.toggle to toggle the isSticky class to true if the intersectionRatio is less than 1, which means it is moving away from the edge of the screen.

We call observer to watch the stickyElm element for intersection.

How to get an element’s padding value using JavaScript?

To get an element’s padding value using JavaScript, we call the getComputedStyle method.

For instance, we write

window.getComputedStyle(txt, null).getPropertyValue("padding-left");

to call getComputedStyle to get the conmputed style of the txt element.

And then we call the getPropertyValue method to get the padding-left style.

How to change placeholder text with JavaScript?

To change placeholder text with JavaScript, we set the placeholder property.

For instance, we write

<input type="text" name="Email" placeholder="Some Text" />

to add an input.

Then we write

document.getElementsByName("Email")[0].placeholder = "new text for email";

to select the input with getElementsByName and get the first element from the returned node list.

And then we set the placeholder property to the new placeholder attribute value.

How to listen for onchange event for input type=”number” with JavaScript?

To listen for onchange event for input type="number" with JavaScript, we set the onchange attribute to the change listener function.

For instance, we write

<input type="number" onchange="onChangeFunction(this.value)" />

to add a number input with the onchange attribute set to JavaScript code that calls the onChangeFunction with the value of the input.

How to limit the maximum files chosen when using multiple file inputs with JavaScript?

To limit the maximum files chosen when using multiple file inputs with JavaScript, we check the length of e.files.

For instance, we write

<input multiple type="file" onchange="trySubmitFile(event)" />

to add a file input.

We set its onchange attribute to call trySubmitFile with the event object.

Then we write

function trySubmitFile(e) {
  const files = e.target.files;
  if (files.length > 5) {
    alert("You are only allowed to upload a maximum of 2 files at a time");
  }
  //...
}

to define the trySubmitFile function.

We check if the number of selected files is bigger than 5 with files.length > 5.

We get the select files with e.target.files.

How to add a confirmation before the closing of the tab/browser with JavaScript?

To add a confirmation before the closing of the tab/browser with JavaScript, we set the window.onbeforeunload property to a function that shows the alert.

For instance, we write

window.onbeforeunload = (e) => {
  return "Sure?";
};

to set window.onbeforeunload to a function that returns a non-empty string.

Then the browser will show an alert box before we close the tab or browser window.

How to change the default message of the required field in the popover of form-control in Bootstrap and JavaScript?

To change the default message of the required field in the popover of form-control in Bootstrap and JavaScript, we call the setCustomValidity method.

For instance, we write

<input
  class="form-control"
  type="email"
  required=""
  placeholder="username"
  oninvalid="this.setCustomValidity('Please Enter valid email')"
  oninput="setCustomValidity('')"
/>

to add an input that sets the oninvalid attribute to call setCustomValidity with the validation message we want.

And we set oninput to call setCustomValidity to empty the validation message.