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 styles 以匹配我的頁面布局，但我遇到的問題是占位符屬性在聚焦時不會消失。 如果我輸入一個標簽並添加一個逗號值，占位符將一直顯示，直到我開始輸入，然后它會再次消失。

我曾嘗試使用 JQuery onfocus function 在 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

當您在input標記中聚焦時，HTML5 placeholder屬性不會消失...它只會在您開始輸入時消失。 這是默認行為。

你可以看到@ 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標記（請參見附圖）並將輸入移到右側。 所以現在輸入沒有價值，應該顯示占位符。

在他們的文檔中提到了 [Search for confirmKeys]

鍵入輸入時將添加標記的鍵碼數組。 （默認值：[13,188]，為ENTER和逗號）

鍵入comma時，更改確認鍵以刪除標記的創建

編輯：

在您的網站上，我在控制台中嘗試了以下方法並且它有效。

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

Answer 8

對於仍然有此問題的所有用戶，只需更改 javascript 文件中的行：

從：

cancelConfirmKeysOnEmpty: true,

到

cancelConfirmKeysOnEmpty: false,

就這樣！