Input field for Tags separated by comma

by

Something similar like Stack Overflow does:

enter image description here

  • Allows alphanumeric and +-.# (and trims whitespaces!)
  • Convert to lowercase
  • Create automatically the Tag Box on focusOut Enter , (add more delimited by | pipe)
  • Delete Tag on click
jQuery($ => { // DOM ready and $ alias in scope.

  // TAGS BOX
  $("#tags input").on({
    focusout() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup(ev) {
      if(/(,|Enter)/.test(ev.key)) $(this).focusout(); 
    }
  });
  $("#tags").on("click", "span", function() {
    $(this).remove(); 
  });
  
});
#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}
<div id="tags">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

More Related Contents:

  1. ToolTip is not closing with Select2
  2. How can I make an image carousel with only CSS?
  3. How can I prevent text/element selection with cursor drag
  4. how to select all class except the clicked element in JQuery?
  5. Pass accepts header parameter to jQuery AJAX
  6. Flatten a javascript object to pass as querystring
  7. jQuery data() returns undefined, attr() returns integer
  8. Specifying the value output of of an HTML5 input type = date?
  9. jQuery form submit() is not working in IE6?
  10. How to call a function after a div is ready?
  11. How to convert selected HTML to Json?
  12. Is variable rowheight a possibility in SlickGrid?
  13. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  14. Does jQuery internally convert HTML5 data attribute keys to lowercase?
  15. jQuery event bubbling
  16. Using JQuery to Access a New Window’s DOM
  17. Javascript check if text selected [closed]
  18. Why doesn’t simulating a tab keypress move focus to the next input field?
  19. Event on a click everywhere on the page outside of the specific div
  20. Javascript “window.open” code won’t work in Internet Explorer 7 or 8
  21. jquery ajax parse response text
  22. Showing Placeholder text for password field in IE
  23. Best practice to avoid memory or performance issues related to binding a large number of DOM objects to a click event
  24. Copy and paste clipboard in JavaScript. or jQuery
  25. Concatenate string with ternary operator in javascript [duplicate]
  26. Why I cant use jQuery functionality
  27. jQuery – prevent default, then continue default
  28. Disable submit button ONLY after submit
  29. how to check confirm password field in form without reloading page
  30. Why won’t .filter() work in Internet Explorer 8?

Leave a Comment