Twitter Bootstrap tags input doesn't remove placeholder when onfocus

Question

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 comma 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 />

Answer 1

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.

Answer 2

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...

Answer 3

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

Answer 4

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

Answer 5

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!

Answer 6

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

Answer 7

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

Answer 8

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