How to make Editable Div Element with contentEditable Attribute

Did you ever thought to make an editable div element or <p>, <span>, etc. that works the same as a Text field and Textarea.

Some websites allow the user to edit their content by just pointing to the content and start to update it.

You will already know that <div> is a read-only container that means you can’t edit the content inside of it.

In this tutorial, I show how you can do this with the contentEditable attribute.

How to make Editable Div Element with contentEditable Attribute

Read more

Get Parameters from URL with JavaScript: Tips and Best Practices

Reading URL parameters is a usual thing in web development, especially when making dynamic web pages that depend on what users type in. URL parameters help different parts of a website communicate with each other. They’re handy for adjusting how a page looks or works based on what a user likes or does.

JavaScript supports a number of methods, each with advantages and disadvantages, for reading parameters from URLs.

Built-in URLSearchParams API in JavaScript, regular expressions, and string manipulation techniques are three methods for extracting URL parameters that are covered in this article.

By the end of this article, you will know more about how to get URL parameters in JavaScript and which method is best for your specific use case.

Get Parameters from URL with JavaScript: Tips and Best Practices

Read more

Show and Hide Password Field Text with jQuery and JavaScript

Password field by default doesn’t show any visible text other than the symbol.

Some websites allow the user to view the hidden text in the password field by toggling.

For this, they provide an element e.g. checkbox or a button when it gets clicked then the password element value is been visible on the screen and reset to default view when it again gets clicked.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

Show and Hide Password Field Text with jQuery and JavaScript

Read more

How to know a Browser Tab Close or Refresh with JavaScript

You cannot control when user will refresh the web page and close it, but it’s important sometimes to display a confirmation alert before closing the Tab.

The user may be mistakenly clicked the close button and lost some important data.

You have seen in Shopping websites when you are in the middle of payment or you are paying the Bill and if you try to refresh the web page then it will show a confirm alert on the screen.

When is it Required?

  • When the form has many fields and the user filled the form but somehow the Browser is being closed. Now, the user needs to again fill that long-form.
  • While student giving the online test and not completed yet and try to close or refresh the page.
  • There are many other situations where you can use it.

In this post, I discuss How you can detect Browser Tab close and refresh using JavaScript.

How to know a Browser Tab Close or Refresh with JavaScript

Read more