Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to select all text in a text input when we click on it. To create this we use HTML, CSS and Javascript.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out this tutorial here down below. Also, check out my youtube channel where I post new tutorials regularly. I also keep you updated with the latest tips and tricks related to web development.
Project Folder Structure:
Now before we start coding let us create the project folder structure. We create a project folder called- ‘Select Text In Input Field On Click’. Inside this folder, we have three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We start with HTML files. First, copy the code below and paste it into your HTML document.
The HTML document consists of a div with the class name ‘container’. Inside the container, we have the input element. The only purpose of the container is to centre and wrap the input element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Select Text In Input Field On Click</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="text" id="demo-inp" placeholder="Type Something Here.." />
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we use CSS to style the container and input text elements. We start by removing unnecessary paddings and margins from all the elements. Following this, we set ‘#03cc64’ as the background colour for the body.
Next, we add paddings and font size to the input element style even more.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #03cc64;
}
.container {
background-color: #ffffff;
width: 80vmin;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 50px 0;
border-radius: 8px;
box-shadow: 0 20px 45px rgba(1, 51, 25, 0.2);
}
.container input {
display: block;
width: 60%;
margin: auto;
border: 1.6px solid #222537;
font-family: "Poppins", sans-serif;
font-size: 20px;
padding: 15px 10px;
border-radius: 5px;
outline: none;
}
.container input:focus {
border-color: #05944a;
}
Javascript:
Lastly, we add functionality using Javascript. We declare a variable called ‘demoInp’ and initialize it to the input text element.
Next, we add a ‘click’ event listener to this input element. Through the function that is called on click, we select the value of this input field.
let demoInp = document.getElementById("demo-inp");
demoInp.addEventListener("click", function () {
this.setSelectionRange(0, this.value.length);
});
That’s it for this tutorial. If you have any issues while creating this code you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions, or feedback you can comment below.
Happy Coding!
