javascript - 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 时删除属性，但它没有做任何事情。我想要实现的是，当焦点集中时，占位符不会在那个点显示，甚至在模糊时也不会显示。

我的输入框如下所示:

<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 函数。在我的例子中，当用户离开对象并且输入标签看起来没有占位符时看起来很干净。