Задать вопрос
Nervosa
@Nervosa
javascript

Как реализовать отображение/скрытие bootstrap popover возле input-тега по нажатию на button?

Здравствуйте!

На страничке имеется элемент input:

<input class="form-control" data-container="body" data-content="Enter at least three characters." data-placement="top" data-toggle="popover" id="id_nickname" name="nickname" placeholder="Enter nickname here" type="text" data-original-title="" title="">


элемент button:
<button id="test-popover" type="button" class="btn btn-default">Click!</button>


и script:
$("#test-popover").on('click', function(){
        $('#id_nickname').popover('hide');
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }
    });


Пытаюсь добиться, чтобы popover выскакивал только когда в input введено менее 3 символов. Вышеприведённый код такого эффекта не даёт - popover ведёт себя странно - при вводе 1-2 символов и первом нажатии button появляется нормально, при последующих появляется на долю секунды, затем исчезает. Также отчего-то popover появляется и при клике в самом input, что нежелательно. Подскажите, пожалуйста, как это можно исправить?
  • Вопрос задан
  • 4848 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решение пользователя Nervosa К ответам на вопрос (5)
Nervosa
@Nervosa Автор вопроса
Пока что самый приемлемый вариант дал нижеследующий код:

$("#test-popover").on("click", function(){

        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        } else {
            $('#id_nickname').popover('destroy');
        }
    });

Однако, почему-то popover всё равно появляется также и при клике в инпуте, что излишне.
Ответ написан
Комментировать
Комментировать