Twitter bootstrap tags not removing placeholder on focus
I was scratching my head yesterday over this issue that I cannot solve. I am a new starter for Twitter Bootstrap and everything went well until yesterday.
I am using latest JQuery v1.11.1 and Twitter Bootstrap v3.3.1. I downloaded Bootstrap Tags Input yesterday, from here: http://timschlechter.github.io/bootstrap-tagsinput/examples/
The plugin works and I changed the CSS styles to match the page layout, but the problem I am facing is that the placeholder attribute does not disappear on focus. If I type in the tag and add a comma value, then the placeholder is displayed until I start typing and then disappears again.
I tried using JQuery's onfocus function to remove an attribute on onfocus, but it doesn't do anything. What I want to achieve is that when focusing, the placeholder does not show any blur at this point.
My input field is shown below:
<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />
source to share
two years later, but I found how to get around this problem. First, if you inspect the DOM, you'll see new input text that our placeholder text inherits, but without the additional onblur, onfocus function that everyone mentioned earlier.
<div class="bootstrap-tagsinput">
<input placeholder="text inherited from our input" size="23" type="text">
</div>
Then, to fix this problem, you had to create a jquery function to point to that input. Like this:
$('.bootstrap-tagsinput input').blur(function(){jQuery(this).attr('placeholder', '')})
pointing to an element with class "bootstrap-tagsinput" and then "input" objects inside. You can also add a .focus function if you like. In my case, it works when the user leaves the object and the input tags appear clean with no placeholder.
source to share
Try this, I hope it works:
<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;
}
EDIT: Working on IE too: JSFiddle
source to share
How the plugin works. Once you hit "enter" or "comma" it will create a span tag (see attached image) and slide the input to the right. So now the input doesn't matter and should show the placeholder.
In his docs, he mentions [Finding ConfirmationKeys]
An array of keycodes that will add the tag as you type input. (default: [13, 188], which are ENTER and commas)
Change submit buttons to remove tagging as you type comma
Edit:
On your site I tried below method in console and it worked.
$('input').tagsinput({
confirmKeys: [13]
});
source to share
I was able to quickly fix using jquery. The behavior I wanted was to do two things:
1) Remove the placeholder on the page after I've focused and started typing. So I ran it on the keyboard.
$(document).on('keyup', '.bootstrap-tagsinput input', function(){
$(this).attr('placeholder', '')
})
2) If the input already has labels, then I obviously don't need a placeholder. I am running 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', '');
}
})
source to share
The 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();
});
source to share
In my case, after a little modification, it works great.
$('#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'));
}
});
source to share