In this article, we are going to create a tag input box using HTML, CSS, and JavaScript. A tags input box is a user interface element that enables users to insert a variety of tags into an input field. To make tag input, we use some javascript methods createElement(), addEventListener(), preventDefault(), value, keydown.
JavaScript Methods:
The createElement() method in JavaScript is used to dynamically create an HTML element node with the specified name.This method accepts the element name as a parameter and produces the element node.
The addEventListener() method is used to associate an event handler with a specific element. It does not replace the current event handlers. Events are thought to be a crucial component of JavaScript. A web page responds to an event. Events can be generated by users or through APIs. An event listener is a JavaScript procedure that waits for an event to occur.
The value property is a property of form elements (such as input, textarea, select, etc.) in JavaScript. It returns the current value of the form element.
The preventDefault() function cancels the event if it is cancelable, indicating that the event’s default action will not occur.
CSS Properties:
border – The attributes are used to define the border style, color, and size of an element.
border-radius – The CSS attribute rounds the outside border edge of an element. You can build circular corners with a single radius or elliptical corners with two radii.
box-shadow – The CSS feature creates shadow effects around the frame of an element. Several effects, separated by commas, can be set. A box shadow is defined by its X and Y offsets, blur and spread radius, and color.
flex-wrap – The attribute determines whether or not the flexible elements should wrap.
CSS Flex or inline-flex can be used as a display property. The children automatically enable flex content when the parent container uses show flex or inline flex.
Example 1: In this example, We first use an unordered list tag to show the result after that we use an input tag to take the user’s input. Then we use some CSS properties to style the list and input tag.
In the javascript code section, we have first defined two variables – `tags` and `input` – which represent the unordered list and input element, respectively. Next, we use an event listener to the `input` element that listens for a `keydown` event. When the user presses the “Enter” key, we prevent the default action of the event using `event.preventDefault()`.
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> .tags-input { display: flex; flex-wrap: wrap; padding: 0; margin: 0; width: 70%; } .tags-input input { flex: 1; border: none; height: 32px; border: 2px solid crimson; border-radius: 10px; } .tags-input input:focus { border: none; } .tags-input ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 8px 0 0 0; } .tags-input ul li { margin-right: 8px; margin-bottom: 8px; padding: 8px; background-color: #ddd; border-radius: 4px; } </style> </head> <body> <div class="tags-input"> <ul id="tags"></ul> <input type="text" id="input-tag" placeholder="Add a tag" /> </div> <script> // Get the tags and input elements from the DOM const tags = document.getElementById('tags'); const input = document.getElementById('input-tag'); // Add an event listener for keydown on the input element input.addEventListener('keydown', function (event) { // Check if the key pressed is 'Enter' if (event.key === 'Enter') { // Prevent the default action of the keypress // event (submitting the form) event.preventDefault(); // Create a new list item element for the tag const tag = document.createElement('li'); // Set the text content of the tag to the input value tag.innerText = input.value; // Append the tag to the tags list tags.appendChild(tag); // Clear the input element's value input.value = ''; } }); </script> </body> </html> |
Output:
Example 2: This one same as the previous example but the difference is that in one previous example, we don’t have the feature to delete the entered tag but in this example, we added a delete button so users can delete the entered tag. Add we also used some CSS properties to make it attractive.
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> .tags-input { display: inline-block; position: relative; border: 1px solid #ccc; border-radius: 4px; padding: 5px; box-shadow: 2px 2px 5px #00000033; width: 50%; } .tags-input ul { list-style: none; padding: 0; margin: 0; } .tags-input li { display: inline-block; background-color: #f2f2f2; color: #333; border-radius: 20px; padding: 5px 10px; margin-right: 5px; margin-bottom: 5px; } .tags-input input[type="text"] { border: none; outline: none; padding: 5px; font-size: 14px; } .tags-input input[type="text"]:focus { outline: none; } .tags-input .delete-button { background-color: transparent; border: none; color: #999; cursor: pointer; margin-left: 5px; } </style> </head> <body> <div class="tags-input"> <ul id="tags"></ul> <input type="text" id="input-tag" placeholder="Enter tag name" /> </div> <script> // Get the tags and input elements from the DOM const tags = document.getElementById('tags'); const input = document.getElementById('input-tag'); // Add an event listener for keydown on the input element input.addEventListener('keydown', function (event) { // Check if the key pressed is 'Enter' if (event.key === 'Enter') { // Prevent the default action of the keypress // event (submitting the form) event.preventDefault(); // Create a new list item element for the tag const tag = document.createElement('li'); // Get the trimmed value of the input element const tagContent = input.value.trim(); // If the trimmed value is not an empty string if (tagContent !== '') { // Set the text content of the tag to // the trimmed value tag.innerText = tagContent; // Add a delete button to the tag tag.innerHTML += '<button class="delete-button">X</button>'; // Append the tag to the tags list tags.appendChild(tag); // Clear the input element's value input.value = ''; } } }); // Add an event listener for click on the tags list tags.addEventListener('click', function (event) { // If the clicked element has the class 'delete-button' if (event.target.classList.contains('delete-button')) { // Remove the parent element (the tag) event.target.parentNode.remove(); } }); </script> </body> </html> |
Output
