Field where tags are generated by user input

Question

Field where tags are generated by user input

I want to incorporate an input field on my website where users can list their skills. These skills should be displayed individually as separate elements on the front end of the site. The desired format for users to input their skills is as follows:

skill 1, skill 2, skill 3

When displayed on the front end, it should appear like this:

[Skill 1] [Skill 2] [Skill 3].

The use of a comma will delineate each skill
and CSS styling will be applied to each individual skill.

I have experimented with various methods but none have achieved the result I envisioned. Any assistance in achieving this layout would be greatly appreciated.

Thank you

javascript jquery html css

Answer 1

Answer №1

Unfortunately, without JavaScript enabled (make sure to add the appropriate tags to your Question), it is not possible to implement this feature. This particular example allows you to continuously input your skills, and by pressing either the comma key or the Enter key, you can separate them.

jQuery(function($) {

  $('#tags input').on('focusout', function() {
    var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // these are the allowed characters
    if (txt) $(this).before('<span class="tag">' + txt + '</span>');
    this.value = "";
    this.focus();
  }).on('keyup', function(e) {
    // comma|enter (add more keyCodes delimited with | pipe)
    if (/(188|13)/.test(e.which)) $(this).trigger('focusout');
  });

  $('#tags').on('click', '.tag', function() {
    if (confirm("Are you sure you want to delete this tag?")) $(this).remove();
  });

});

#tags {
  float: left;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: Arial;
}

#tags span.tag {
  cursor: pointer;
  display: block;
  float: left;
  color: #555;
  background: #add;
  padding: 5px 10px;
  padding-right: 30px;
  margin: 4px;
}

#tags span.tag:hover {
  opacity: 0.7;
}

#tags span.tag:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  border-radius: 10px;
  padding: 0 4px;
  margin: 3px 0 10px 7px;
  font-size: 10px;
}

#tags input {
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}

Add a skill and hit [,] or [Tab] or [Enter]<br><br>

<div id="tags">
  <span class="tag">Photoshop</span>
  <span class="tag">Illustrator</span>
  <input type="text" value="" placeholder="Add a skill" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

Unfortunately, without JavaScript enabled (make sure to add the appropriate tags to your Question), it is not possible to implement this feature. This particular example allows you to continuously input your skills, and by pressing either the comma key or the Enter key, you can separate them.

jQuery(function($) {

  $('#tags input').on('focusout', function() {
    var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // these are the allowed characters
    if (txt) $(this).before('<span class="tag">' + txt + '</span>');
    this.value = "";
    this.focus();
  }).on('keyup', function(e) {
    // comma|enter (add more keyCodes delimited with | pipe)
    if (/(188|13)/.test(e.which)) $(this).trigger('focusout');
  });

  $('#tags').on('click', '.tag', function() {
    if (confirm("Are you sure you want to delete this tag?")) $(this).remove();
  });

});

#tags {
  float: left;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: Arial;
}

#tags span.tag {
  cursor: pointer;
  display: block;
  float: left;
  color: #555;
  background: #add;
  padding: 5px 10px;
  padding-right: 30px;
  margin: 4px;
}

#tags span.tag:hover {
  opacity: 0.7;
}

#tags span.tag:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  border-radius: 10px;
  padding: 0 4px;
  margin: 3px 0 10px 7px;
  font-size: 10px;
}

#tags input {
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}

Add a skill and hit [,] or [Tab] or [Enter]<br><br>

<div id="tags">
  <span class="tag">Photoshop</span>
  <span class="tag">Illustrator</span>
  <input type="text" value="" placeholder="Add a skill" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 3

Answer №2

How about giving this a try?

It's an innovative tags editor jquery plugin that resembles stackoverflow tags. I find it quite impressive. However, you may need to make some customizations to tailor it to your specific needs.

Answer 4

How about giving this a try?

It's an innovative tags editor jquery plugin that resembles stackoverflow tags. I find it quite impressive. However, you may need to make some customizations to tailor it to your specific needs.

Answer 5

Answer №3

If you are incorporating client side scripting, you can utilize the jQuery function split() to separate a value with comma(',') into an array, then attach a CSS class to each element in the array and show it.

var data = "skill 1, skill 2, skill 3";
data_array = data.split(",");

You can retrieve the elements using data_array[0], data_array[1], and data_array[2].

Add or append these values to input fields or HTML elements using .css( "color", "red" )

Answer 6

If you are incorporating client side scripting, you can utilize the jQuery function split() to separate a value with comma(',') into an array, then attach a CSS class to each element in the array and show it.

var data = "skill 1, skill 2, skill 3";
data_array = data.split(",");

You can retrieve the elements using data_array[0], data_array[1], and data_array[2].

Add or append these values to input fields or HTML elements using .css( "color", "red" )

Field where tags are generated by user input

Answer №1

Answer №2

Answer №3

Similar questions

Personalizing the Twitter Bootstrap grid layout to fit your needs

How to style a MenuButton's ContextMenu individually with CSS in JavaFX

Search for text within the nearest <p> tag using HTML and jQuery

Simple CSS3 Features for Seamless Browser Compatibility

Experiencing the appearance of a scroll bar upon adjusting the padding of mat-dialog-container to 0

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

What is the best way to incorporate jQuery and its plugins into a Vue component?

What is the process for using the scrollIntoView function on an svg element like a rectangle?

Discovering the full URL of an image tag

Responsive slide displays a unique number of items per slide depending

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

How to successfully pass a string variable from JavaScript to PHP using Ajax

CSS for decorating an image with a border and transparent background

Is it more suitable for the response logic to be implemented within the saga or the reducer?

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

How can you modify an existing animation style upon hovering?

Ways to sort data based on dropdown selection in MVC Razor

Has the Field Validity Been Verified and Are all Fields Completed Prior to Submitting?

Employing a pair of interdependent v-select components to prevent any duplicate entries

Optimal approach for customizing the appearance of child components based on the parent component