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

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

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

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

Answer 2

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

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

我能够使用 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 4

两年后，但我找到了解决此问题的方法。首先，如果你检查 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”的元素，然后指向内部的“输入”对象。如果您愿意，也可以添加 .focus 函数。在我的情况下，当用户离开对象并且输入标签在没有占位符的情况下看起来很干净时工作。

Answer 5

这就是插件的行为方式。一旦你点击“输入”或“逗号”，它就会创建一个跨度标签（见附图）并将输入向右移动。所以现在输入没有任何价值，应该显示占位符。

In their docs it's mentioned[搜索confirmKeys]

在输入时添加标签的键码数组。 （默认：[13, 188]，即 ENTER 和逗号）

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

编辑：

在您的site 上，我在控制台中尝试了以下方法，它奏效了。

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

Answer 6

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

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

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

你也可以看到@W3Schools...