Tired of messy multi-spaced text? Learn how to create an input field that accepts only one space between words using JavaScript. Easy to follow, code included!
In this blog post you’ll learn how to make an input field to accept only one space between words using JavaScript.
It's easy to make the input field that takes only one space between words using JavaScript. You can use the replace method with a simple regular expression to replace all multiple spaces within the input field with a single space. This replacement can be done directly on user input (live, while typing) using the “oninput” JavaScript event. See the code below for an example.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make input field that takes only one space between words. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<input type="text" class="input">
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
height: 100vh;
background-color: #F06292;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 500px;
background-color: #fff;
padding: 15px;
border-radius: 10px;
text-align: center;
display: flex;
}
input{
width: 100%;
font-size: 25px;
padding: 10px;
}
JavaScript
let input_field = document.querySelector(".input");
input_field.addEventListener("input", maketechstuff);
function maketechstuff() {
input_field.value = input_field.value.trim().replace(/\s+/g, " ");
}
Output:
You can replace the multiple spaces from a input field value on unfocus or blur. Like this:
Example 1.
JavaScript
let input_field = document.querySelector(".input");
input_field.addEventListener("blur", maketechstuff);
function maketechstuff() {
input_field.value = input_field.trim().value.replace(/\s+/g, " ");
}
Output:
Like wise you can run the function that replace the multiple spaces between words to single spaces on other JavaScript events (like focus, click etc).
Example 2:
JavaScript
let input_field = document.querySelector(".input");
input_field.addEventListener("blur", maketechstuff);
// Example 2.
function maketechstuff() {
let array = input_field.value.split(" ");
let string = "";
for (let i = 0; i < array.length; i++) {
const element = array[i];
if (element.length !== 0) {
string += element + " ";
}
}
input_field.value = string.trim();
}
So that's how you can add the functionality to the input field to instantly replace the multiple space between words using JavaScript. If you have any query or suggestions you can write in the comment section.
You may like:
- Create input field that allow only numeric values using JavaScript.
- Create input field that convert the text cases (upper and lower) instantly on user input with JavaScript.
- Create input field that accept only alphanumeric value using JavaScript.
- Clear input field on click using JavaScript.
- Disable input field dynamically with JavaScript.
- Input field border animation on focus using HTML and CSS.
Share your thoughts.