CODEWITHSUNDEEP
javascriptphphtmlcss
K-Infected
K-Infected

Reputation: 75

How to add tags inside Text Area?

I am designing a HTML form in which I want to add different places of the city. First I am going to select the city from the drop down list, then under that city I need to add different place names.

In my form I want to use Tags similar to those which are used while composing Emails in Gmail, where multiple Emails can be added. Any word seperated by comma should appear to be as a tag.

On Submit, each place name must be stored as a different value under the feild "Places" in the database.

This is the design image of the form

This is the design image of the database table

Upvotes: 5

Views: 8950

Answers (3)

Donnie D'Amato
Donnie D'Amato

Reputation: 3940

Without rewriting an entire plugin, I'll just give you the basics on how something like this typically works.

The box isn't a textarea, it's a div. Inside the div there's first an input with no border or background; it's basically invisible. After typing in the input, the function would either listen for a tab key or comma character (just using comma below). If it gets one of those triggers, it takes the value of the input, wraps it in a button (or some other inline element like a span), and prepends it inside the div. Finally, it clears the input. I'm using a button here because you should also be able to remove the element.

Using jQuery just to make things easier.

$('#textarea input').on('keyup', function(e){
   var key = e.which;
   if(key == 188){
      $('<button/>').text($(this).val().slice(0, -1)).insertBefore($(this));
      $(this).val('').focus();
   };
});

$('#textarea').on('click', 'button', function(e){
   e.preventDefault();
  $(this).remove();
   return false;
})
#textarea{
  border:1px solid #eee;
}

#textarea input{
  border:none;
  background:none;
  font-size:1.2em;
  padding:6px;
}

#textarea input:focus{
   outline:none;
}

#textarea button{
   border:1px solid #eee;
   background:#f5f5f5;
  margin:4px;
  font-size:1.2em;
  cursor:pointer;
}

#textarea button:after{
   content:"\d7";
   color:red;
   margin-left:2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textarea"><input type="text"/></div>

Upvotes: 10

Dandy
Dandy

Reputation: 1481

Whilst I've personally never had to implement tags, my advice would have been to scour the internet to find something similar to what you are trying to achieve, and try to mimic their code and learn from that.

Fortunately, I've found one for you to potentially save you the time, it uses JavaScript to actually create the tags whenever you use a comma.

http://sean.is/poppin/tags

Source code appears to be available on Git and may provide the answers you're looking for, without me having to do this part for you!

Best of luck with this!

Upvotes: 2

Geo Paul
Geo Paul

Reputation: 1817

I think its best to use some plugin like tag it. https://github.com/aehlke/tag-it

Just check the demo.

Upvotes: 0

Related Questions