Author: John Au-Yeung

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

Categories
JavaScript Answers

How to avoid decimal values in a number input with JavaScript?

Labrador retriever puppy walking on green grass

To restrict a number input to accept only whole numbers (integers) without decimal values, you can use JavaScript to listen for the input event and validate the input value. Here’s an example of how you can achieve this:

<input type="number" id="myNumberInput">

to create an HTML input.

Then write the following JavaScript code

<script>
document.getElementById('myNumberInput').addEventListener('input', function(event) {
    // Get the input value
    let inputValue = event.target.value;
    
    // Remove any non-numeric characters and leading zeroes
    inputValue = inputValue.replace(/\D|^0+/g, '');
    
    // Update the input value
    event.target.value = inputValue;
});
</script>

In this code we attach an event listener to the number input element with the ID myNumberInput.

When the input event is triggered (i.e., when the user types or pastes into the input field), the event listener function is called.

Inside the event listener function, we retrieve the input value from the event object.

We use a regular expression (/\D|^0+/g) to remove any non-numeric characters and leading zeroes from the input value.

Finally, we update the input value to the sanitized value without decimal values.

This code will ensure that only whole numbers are accepted in the number input field, and any decimal values will be automatically removed as the user types.

Categories
JavaScript Answers

How to open a link in a new tab with JavaScript in a Chrome extension?

Labrador retriever puppy walking on green grass

In a Chrome extension, you can open a link in a new tab using JavaScript by leveraging the chrome.tabs.create() method provided by the Chrome extension API. Here’s how you can do it:

javascript Copy code // Example code to open a link in a new tab chrome.tabs.create({ url: “https://example.com”, active: true }); This code snippet will open a new tab with the URL “https://example.com”. The active: true option ensures that the newly opened tab becomes the active tab.

Make sure to include this code within your Chrome extension’s background script, popup script, or content script, depending on where you want the link to be opened from.

For instance, if you want to open a link in a new tab when a user clicks on a browser action icon (popup), you can include this code in your popup script.

First we write the following JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const link = document.getElementById('myLink');
  link.addEventListener('click', function() {
    chrome.tabs.create({ url: "https://example.com", active: true });
  });
});

Then we write the following HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <script src="popup.js"></script>
</head>
<body>
  <a href="#" id="myLink">Open Example.com in New Tab</a>
</body>
</html>

This code creates a popup with a link. When the user clicks on the link, the chrome.tabs.create() method is called to open “https://example.com” in a new tab.

Categories
HTML

How to prevent a browser from storing passwords with HTML and JavaScript?

Labrador retriever puppy walking on green grass

Preventing a browser from storing passwords is generally a user preference, and as such, it’s controlled by browser settings rather than by HTML or JavaScript. However, you can use the autocomplete attribute to suggest to the browser not to save passwords for a specific input field.

To do this we write

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autocomplete="off">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="new-password">
  
  <input type="submit" value="Submit">
</form>

to create a form.

The autocomplete="off" attribute on the username field suggests to the browser that it should not remember previously entered values for this field.

The autocomplete="new-password" attribute on the password field suggests to the browser that it should not suggest previously entered passwords for this field, and it should prompt the user to enter a new password if available.

However, it’s important to note that browsers may choose to ignore these suggestions for security reasons, especially in the case of password fields. Users also have control over their browser’s settings, and they may choose to ignore these suggestions or enable password saving globally.

Therefore, while you can use these attributes to suggest to the browser not to save passwords, it’s ultimately up to the browser and user whether passwords are saved or not. Additionally, JavaScript cannot directly control browser settings related to password saving.

Categories
HTML

How to display HTML form as an inline element?

Labrador retriever puppy walking on green grass

To display an HTML form as an inline element, you can use CSS to set its display property to inline or inline-block.

To create a form we write

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Submit">
</form>

Then we make the form inline by writing

#myForm {
  display: inline; /* or display: inline-block; */
}

In this example, the form with the ID myForm will be displayed as an inline element. You can adjust its positioning and styling as needed.

Using display: inline or display: inline-block will make the form behave similarly to other inline elements like spans or images, allowing other content to flow around it horizontally.

Remember to adjust the CSS properties according to your specific layout requirements.

Categories
CSS

How to add line break using only CSS?

Labrador retriever puppy walking on green grass

We can add line breaks using CSS by utilizing the ::after or ::before pseudo-elements along with the content property. Here’s an example of how to add a line break using CSS:

For instance we write

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Break using CSS</title>
<style>
    /* Define a class for adding line break */
    .line-break::after {
        content: "\A"; /* Use "\A" to represent a line break */
        white-space: pre; /* Preserve white space */
    }
</style>
</head>
<body>

<!-- Apply the line-break class to add a line break -->
<div class="line-break">This is a line<br>with a line break added using CSS.</div>

</body>
</html>

We define a CSS class .line-break::after and use the content property to insert a line break represented by \A. This special character represents a line break in CSS content.

Also we use white-space: pre; to preserve white space and ensure the line break behaves as expected.

Then we apply the .line-break class to an element, it will insert a line break after the content of that element.

Please note that this method is mainly used for adding line breaks in specific cases where you cannot modify the HTML structure directly, and it may not be suitable for all situations. In most cases, it’s better to use HTML markup like <br> tags to indicate line breaks.