I have been scratching my head since yesterday on this problem, which I cannot solve. I am a new starter to Twitter Bootstrap and everything was going well until yesterday.

I am using the latest JQuery v1.11.1 and Twitter Bootstrap v3.3.1. Yesterday I downloaded Bootstrap Tags Input, from here: /

The plugin works and I have changed the CSS styles to match my page layout but the problem I am having is that the placeholder attribute will not disappear when on focus. If I type in a tag and add a ma value the placeholder will show until I start typing and then it will disappear again.

I have tried using JQuery onfocus function to remove the attribute when onfocus but it doesn't do anything. What I want to achieve is that when onfocus the placeholder does not show at that point not even on blur.

My input field is demonstrated below:

<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />

I have been scratching my head since yesterday on this problem, which I cannot solve. I am a new starter to Twitter Bootstrap and everything was going well until yesterday.

I am using the latest JQuery v1.11.1 and Twitter Bootstrap v3.3.1. Yesterday I downloaded Bootstrap Tags Input, from here: http://timschlechter.github.io/bootstrap-tagsinput/examples/

The plugin works and I have changed the CSS styles to match my page layout but the problem I am having is that the placeholder attribute will not disappear when on focus. If I type in a tag and add a ma value the placeholder will show until I start typing and then it will disappear again.

I have tried using JQuery onfocus function to remove the attribute when onfocus but it doesn't do anything. What I want to achieve is that when onfocus the placeholder does not show at that point not even on blur.

My input field is demonstrated below:

<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />

• javascript
• html
• css
• twitter-bootstrap
• bootstrap-tags-input

• Which browser do you see this behaviour in? – haxtbh Commented Dec 16, 2014 at 11:30
• can you give a link or jsbin/codepen etc? "show until I start typing" sounds like its acting as it should. – atmd Commented Dec 16, 2014 at 11:31
• Hi it is Firefox 34.0.5 which is the latest version – Cam Commented Dec 16, 2014 at 11:32
• @atmd here is the link to my code brightlet.kollkolen./tagsinput.html as you can see when typing a ma the placeholder shows again. – Cam Commented Dec 16, 2014 at 11:43
• if you don't want plete tag input when you press ma , you should try to remove something on your plug-in, maybe only 'confirmKeys: [13]'. "Comma" is confirm for your input which pleted. – HATCHA Commented Dec 16, 2014 at 11:59

9 Answers 9

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 "ma" 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 ma)

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

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});
        
    }

    
  });