Щебетать теги бутстрапа не удаляют местозаполнителя, когда onfocus

Question

Я почесываю голову со вчерашнего дня по этой проблеме, которую я не могу решить. Я новый стартер для Twitter Bootstrap, и все прошло хорошо до вчерашнего дня.

Я использую последние JQuery v1.11.1 и Twitter Bootstrap v3.3.1. Вчера я загрузил Bootstrap Tags Input, отсюда: http://timschlechter.github.io/bootstrap-tagsinput/examples/

Плагин работает, и я изменил стили CSS в соответствии с макетом страницы, но проблема, с которой я столкнулась, заключается в том, что атрибут placeholder не исчезнет при фокусировке. Если я наберу тег и добавлю значение запятой, то заполнитель будет отображаться до тех пор, пока я не начну печатать, а затем снова исчезнет.

Я попытался использовать функцию JQuery onfocus, чтобы удалить атрибут при onfocus, но он ничего не делает. То, что я хочу достичь, - это то, что при фокусировке заполнитель не показывает в этот момент даже не размытие.

Мой поле ввода демонстрируется ниже:

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

Answer 1

HTML5 placeholder атрибут не исчезнет, ​​когда вы сосредоточены на input тег ... она исчезнет только тогда, когда вы начнете печатать. Это поведение по умолчанию.

Вы можете видеть это @W3Schools, а ...

Answer 2

Попробуйте это, я надеюсь, что это работает:

<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

EDIT: Работа над IE тоже: JSFiddle

Answer 3

Так работает плагин. Как только вы нажмете «enter» или «comma», он создаст тег span (см. Прикрепленное изображение) и сдвиньте вход вправо. Итак, теперь вход не имеет значения и должен показывать местозаполнитель.

In their docs it's mentioned [Поиск confirmKeys]

массив, который коды клавиш добавить тег при вводе текста в поле ввода. (по умолчанию: [13, 188], которые ENTER и запятой)

Измените confirmkeys удалить создание тегов, когда вы печатаете comma

Edit:

На вашем site I попробовал метод ниже в консоли, и он сработал.

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

Answer 4

два года спустя, но я нашел, как обойти эту проблему. Во-первых, если вы проверите DOM, вы увидите новый текст ввода, который наследует наш текст-заполнитель, но без дополнительной функции onblur, в фокусе, о которой все упоминают раньше.

<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', '')}) 

, указывающий на элемент с классом «самозагрузки-tagsinput», а затем «входные» объекты внутри. Вы также можете добавить функцию .focus, если хотите. В моем случае, работает, когда пользователь покидает объект, а теги ввода выглядят чистыми без заполнителя.

Answer 5

Я смог быстро исправить использование jquery. Поведение, которое я хотел, должно делать две вещи:

1) Удалите местозаполнитель на странице после того, как я сосредоточился и начал печатать. Поэтому я запустил его на клавиатуре.

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