3

从昨天开始，我一直在为这个问题挠头，我无法解决。我是 Twitter Bootstrap 的新手，直到昨天一切都很顺利。

我正在使用最新的 JQuery v1.11.1 和 Twitter Bootstrap v3.3.1。昨天我从这里下载了 Bootstrap 标签输入：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 />

4

7 回答 7

6

两年后，但我找到了解决这个问题的方法。首先，如果您检查 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 函数。在我的情况下，当用户离开对象并且输入标签看起来很干净没有占位符时有效。

于 2016-12-20T19:31:22.387 回答
2

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

你也可以在@ W3Schools看到它......

于 2014-12-16T11:34:08.280 回答
1

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

    <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();
});
于 2017-07-31T07:11:32.937 回答
0

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

<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

于 2014-12-16T11:42:39.750 回答
0

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

在此处输入图像描述

在他们的文档中提到了[搜索确认键]

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

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

编辑：

在您的网站上，我在控制台中尝试了以下方法并且它有效。

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

在此处输入图像描述

于 2014-12-16T12:03:50.933 回答
0

我能够使用 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', '');
    }
})
于 2017-07-07T05:26:18.387 回答
0

就我而言，经过一些修改后，它工作正常。

$('#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'));
        }
    });
于 2018-02-28T07:42:23.163 回答