Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing.

Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts.

My goal is to customize an input field for tags so that when users type spaces, a new tag is added. However, my only option is to utilize CSS for this customization.

Therefore, my question is: can we achieve the same functionality as shown in the image below using just CSS?

Essentially, I want users to be able to input words and have them automatically converted into tags when they press the spacebar.

I came across a script at this link:

Any assistance on this matter would be greatly appreciated.

javascriptjqueryhtmlcsstags

Answer №2

Looking for a fun project to work on with some free time? Consider creating a tagging system without using libraries. Users can input tags based on predefined options, and you have the flexibility to customize the tag input function.

Enhance the evaluateTagFunction by incorporating AJAX calls to fetch tags from a database. The potential for customization is vast. Utilize the TagInput constructor by creating a new instance using new tagInput().

Check out the sample code here

var sampleTags = ["Superman", "Batman", "Aquaman", "Thor", "Spiderman", "Hulk", "Wolverine", "Professor-X"];

// Rest of the JavaScript code remains the same

To style the tag builder and elements:

.tag_builder {
    /* CSS styling for the tag builder */
}

/* Additional CSS styles for tag elements, helper, and input */

// Add appropriate CSS for the tag builder layout

Follow these steps to create an instance of the tag input:

// Create a new instance of the tag input
var tagcreator = new tagInput();
document.body.appendChild(tagcreator.container);
tagcreator.container.className = "tag_builder";
tagcreator.placeholder = "Add a tag...";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make a JSONP request with the MIME Type set to text/plain

I've been attempting to utilize JSONP for fetching a feed from a different domain. Despite knowing that the content type should ideally be JSON or JavaScript, it is currently set as text/plain and unfortunately, I lack control over the server settings ...

javascriptjqueryajaxjson

Is there a workaround for the issue of the NodeJS Web Cryptography API require() being undefined in an unsecure origin (Heroku App)?

My goal is to implement the experimental Web cryptography API (SubtleCrypto) on my Node.js server hosted on Herokuapp. The aim is to encrypt data from a fetch request sent from gitpages to herokuapp, concealing sensitive information from the browser consol ...

javascriptnode.jsmongodbherokuwebcrypto-api

invoke the modal function from a separate React file

I am currently studying react and nextjs. I am experimenting with calling a modal from another file but unfortunately it's not functioning as expected. Here is the code I used: Signin.js import { Modal } from "react-bootstrap"; import { u ...

javascriptreactjsnext.js

Unsure of the response from the $.post request

CHANGE: I keep receiving the object {"readyState":1}. Why is this happening? How can I successfully retrieve the result from the $.post (specifically, the object {"result":"ERROR"})? This pertains to using jEditable. (Please note: This seems more like a ...

ajaxjsonjqueryjeditable

Unable to navigate to the specified action in the MVC framework

In my View, I have a form for updating an Order with several fields and two buttons: Submit and Back. To send the form data to the controller, I am using jQuery Ajax: function onUpdate(e) { var data = getParameters(); $.ajax({ url: ' ...

jqueryajaxasp.net-mvc

Editing content directly within an ASP.NET Core MVC application through AJAX encounters a 400 error, indicating a Bad Request

I'm attempting to implement inline editing using AJAX in ASP.NET Core MVC, but I keep receiving a 400 error (Bad Request). The idea is to click on a table row to edit and save the new values in an SQL database. Could someone confirm if I am on the r ...

jqueryajaxasp.net-coreasp.net-core-mvc

Tips for designing a tabbed interface using HTML

I am attempting to design a tabbed interface in HTML on my Google Sites page. I want it to behave similarly to this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h However, when I insert the code into an HT ...

htmlgoogle-sites

There is currently no graph being shown

I've run this code but I'm not getting any output. There are no errors showing up, but I can't seem to figure out what's wrong. Can someone help me identify the issue? Thanks! <!DOCTYPE html> <html> <head> <m ...

htmlangularjsplotgraph

What is the method for turning off Bootstrap for viewport width below a specific threshold?

I'm currently utilizing bootstrap for my website design. However, there's a particular CSS rule causing some frustration on one specific page: @media (min-width: 576px) .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-w ...

htmlcsstwitter-bootstrap

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

https://i.stack.imgur.com/YpuJl.pngThis form field is for entering text input. <span> <img src="images/author2.jpg" width="50" /> //The profile picture displayed here is static but in the database I have a dynamic image. <input class="sea ...

phphtmlarraysajax

Is the toString() method explicitly invoked by Number() if the value is not of type number or string? (such as a function)

Looking for clarification on the behavior of parseInt() compared to the Number() constructor called as a function. I want to confirm if this is reliable and if there's an official reference to support it. Below is sample code: let adder = (function ...

javascriptfunction

Utilize jQuery script on every single element

Is there a way to implement a jquery function on elements that are dynamically loaded via ajax? <span class="h">Test</span><br /><br /> <span class="h">Test</span><br /><br /> <span class="h">Test</ ...

javascriptjqueryajaxclick

Managing the display of numerous ngFor components

If you're interested in learning more about the features I will include, here's a brief overview. I plan to have a project section with cards displayed for each project, all populated from a JSON file. When users click on a card on the website, a ...

javascripthtmlangulartypescriptangular6

Utilize AJAX to fetch and display the response from a Node JS route directly onto an HTML page

At the moment, I am retrieving client-side HTML/JS inputs (var1 and var2) which are then sent to server-side Node JS. The input values are stored in variables through an AJAX post call made to a specific route. What I want now is to define the values of v ...

javascripthtmljquerynode.jsajax

AngularJS - one-time execution of view generation from .NET controller

Currently, I have an MVC .NET application integrated with AngularJS. In my route provider configuration, I am utilizing the controllers of MVC to retrieve the views as shown below: .when('/Units', { templateUrl: 'Unit/Units' ...

javascriptc#angularjsasp.net-mvcasp.net-mvc-5

Adding options to a dropdown menu using jQuery and Ajax technique

After retrieving data from an Ajax call and attempting to append option values to a dropdown generated in jQuery, it doesn't seem to be working as expected. Here is the code snippet: $(document).on('focusout', '.generate', functio ...

jqueryajaxjsoncodeigniterpost

Having trouble verifying the selection option in Angular 6

I've been trying to implement Select option validation in Angular 6, but neither Aria-required nor required seem to be effective. The requirement is for it to display a message or show a RED border similar to HTML forms. Here's the HTML snippet ...

htmlangulartypescriptangular6

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

I am currently working on integrating the ADAL JS sample code from this link into a SharePoint framework client web part. My code is fairly straightforward, as I have already installed packages like adal, fs, and node-fs using NPM. However, when running t ...

javascriptnode.jstypescriptadaladal.js

Could it be that the function is returning undefined because console.log is executing before the result is actually returned? Perhaps a promise

There is a function located in another file that I need to extract the response from and perform an action based on that response before completing my controller function. This is the snippet of code from the external file: exports.counter = function(com ...

javascriptnode.jsexpressnpm-request

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

jqueryajaxunit-testingqunit