在onfocus上，Twitter Bootstrap标签输入不会删除占位符

Question

从昨天开始，我一直在摸不着头脑，这是我无法解决的问题。我是Twitter Bootstrap的新手，直到昨天一切顺利。

我使用的是最新的JQuery v1.11.1和Twitter Bootstrap v3.3.1。昨天我从这里下载了Bootstrap Tags Input：http://timschlechter.github.io/bootstrap-tagsinput/examples/

该插件有效，我已经改变了CSS样式以匹配我的页面布局，但我遇到的问题是占位符属性在焦点上不会消失。如果我输入标签并添加逗号值，占位符将显示，直到我开始输入，然后它将再次消失。

我尝试使用JQuery onfocus函数在onfocus时删除属性，但它没有做任何事情。我想要实现的是，当onfocus时，占位符在该点上不会显示甚至模糊。

我的输入字段如下所示：

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

Answer 1

两年后，但我找到了如何解决这个问题。首先，如果您检查DOM，您将看到一个新的输入文本，它继承了我们的占位符文本，但没有额外的函数onblur，onfocus，以前所有人都提到过。

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

然后，要解决此问题，您必须创建一个jquery函数来指向该输入。像这样：

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

指向带有“bootstrap-tagsinput”类的元素，然后指向“input”对象。如果您愿意，也可以添加.focus功能。在我的情况下，当用户离开对象并且输入标签看起来干净而没有占位符时起作用。

Answer 2

当你专注于placeholder标签时，HTML5 input属性不会消失......它只会在你开始输入时消失。这是默认行为。

你可以看到@ W3Schools ......

Answer 3

试试这个，我希望它有效：

<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

编辑：也在IE上工作：JSFiddle

Answer 4

这就是插件的行为方式。只要您点击“输入”或“逗号”，它就会创建一个span标记（请参见附图）并将输入移到右侧。所以现在输入没有价值，应该显示占位符。

In their docs it's mentioned [搜索确认关键词]

键入输入时将添加标记的键码数组。 （默认值：[13,188]，为ENTER和逗号）

键入comma时，更改确认键以删除标签的创建

编辑：

在你的site我在控制台尝试了下面的方法，它工作。

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

Answer 5

我能够使用jquery快速修复。我想要的行为应该做两件事：

1）在我聚焦并开始输入后，在页面上删除占位符。所以我会在keyup上运行它。

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

2）如果输入中已经有标签，那么我显然不需要占位符。我在页面加载时运行它。

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

Answer 6

以下代码适用于我的情况：

    <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

在我的情况下，经过一点修改，它工作正常。

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