Twitter Bootstrap tags input doesn't remove placeholder when onfocus

two years later, but i found how to work around this issue. First, if you inspect the DOM , you will see a new input text, which inherits our placeholder text, but without the extra function onblur, onfocus that everybody mention before.

<div class="bootstrap-tagsinput"> <input placeholder="text inherited from our input" size="23" type="text"> </div> 

Then, to fix this issue, you had to create a jquery function to point that input. Like this:

$('.bootstrap-tagsinput input').blur(function(){jQuery(this).attr('placeholder', '')}) 

pointing to element with the class "bootstrap-tagsinput" and then the "input" objects inside. You can add a .focus function too if you prefered. In my case, works when the user leave the object and the input tags look clean without placeholder.

HTML5 placeholder attribute will not disappear when you focus in the input tag... it will only disappear when you start typing. It is the default behavior.

You can see it @ W3Schools as well...

Following code works in my case:

 <input type="text" name="add_image_tags" id="add_image_tags" data-role="tagsinput" class="form-control" placeholder="Enter tags" data-placeholder="Enter tags" value="" /> handlePlaceHolder(); //Call during page load function handlePlaceHolder() { if($('#add_image_tags').val()) { $('.bootstrap-tagsinput input').attr('placeholder', ''); } else { $('.bootstrap-tagsinput input').attr('placeholder',$('#add_image_tags').attr('data-placeholder')); } } $('#add_image_tags').on('itemRemoved', function(event) { // event.item: contains the item handlePlaceHolder(); }); $('#add_image_tags').on('itemAdded', function(event) { // event.item: contains the item handlePlaceHolder(); }); 

Try this, i hope it's working:

<form> <div> <label for="name" class="left-label">Your Name</label> <input type="text" class="example-two" placeholder="Enter you tags" id="name" name="name"> </div> </form> 

CSS:

[placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s ease; opacity: 0; } .example-two:focus::-webkit-input-placeholder { transition: text-indent 0.5s 0.5s ease; text-indent: -100%; opacity: 1; } body { } form { display: inline-block; margin-top: 20px; } label { display: block; text-align: left; font: bold 0.8em Sans-Serif; text-transform: uppercase; } .left-label { float: left; padding: 8px 5px 0 0; } input[type=text] { padding: 5px; text-indent: 0; } form div { margin: 20px; clear: both; text-align: left; } 

JSFiddle

EDIT: Working on IE too: JSFiddle

That's how the plugin behaves. As soon as you hit "enter" or "comma" it creates a span tag (see image attached)and shift the input to the right. So now the input has no value and should show the placeholder.

In their docs it's mentioned [Search for confirmKeys]

Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma)

Change the confirmkeys to remove creation of tags when you type comma

Edit:

On your site I tried the below method in console and it worked.

$('input').tagsinput({ confirmKeys: [13] }); 

I was able to do a quick fix using jquery. The behavior I wanted should do two things:

1) Remove placeholder while on page after I've focused and started typing. So I will run it on keyup.

$(document).on('keyup', '.bootstrap-tagsinput input', function(){ $(this).attr('placeholder', '') }) 

2) If there are already labels in an input, then I don't obviously need a placeholder. I run this on page load.

$('.labels').each(function(){ var len = $(this).tagsinput('items'); if(len){ var $input = $($(this).prev().children('input').get(0)); $input.attr('placeholder', ''); } }) 

In my case, after a little modification, it works fine.

$('#txtTimeSlot').on('change', function () { var len = $(this).tagsinput('items').length; if (len > 0) { var $input = $($(this).prev().children('input').get(0)); $input.attr('placeholder', ''); } else { var $input = $($(this).prev().children('input').get(0)); $input.attr('placeholder', $(this).attr('placeholder')); } }); 

for all who are still having this problem, just change the line in the javascript file:

from:

cancelConfirmKeysOnEmpty: true, 

to

cancelConfirmKeysOnEmpty: false, 

And thats all!

$(document).ready(function() { $('.bootstrap-tagsinput input[type="text"]').tagsinput('remove', 'placeholder') function updatePlaceholder() { var input = $('.bootstrap-tagsinput input[type="text"]'); input.attr('placeholder', $('.bootstrap-tagsinput .tag.label.label-info').length ? '' : 'e.g. Milk,Egg,Potato'); } updatePlaceholder(); var observer = new MutationObserver(updatePlaceholder); var tagsInputDiv = document.querySelector('.bootstrap-tagsinput'); if (tagsInputDiv) { observer.observe(tagsInputDiv, { childList: true}); } });