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

Question

[Nervosa]

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

На страничке имеется элемент 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, что нежелательно. Подскажите, пожалуйста, как это можно исправить?

Answer 1

[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 всё равно появляется также и при клике в инпуте, что излишне.

Answer 2

[Кирилл Алхимов]

Могу ошибаться, но лучше проверять изменения при наборе текста:

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

Примерно так.

Answer 3

[Ilyas Masirov]

Лучше всего прикрепить событие к инпуту

$("#test-popover").bind('input', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });

Answer 4

[Nervosa]

Оба варианта не помогли. Повторюсь - необходимо, чтобы popover отображался только когда юзер введёт 0, 1 или 2 символа в input с id="id_nickname" и нажмёт button с id="test-popover".

Answer 5

[Ilyas Masirov]

Вот этот кусок кода должен точно сработать. Вы вводите 1-2 символа в текстовое поле, нажимаете на кнопку и появляется то, что вам нужно

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

пример

а в предыдущем коде, я забыл поменять id кнопки на id текстового поля, чтобы введенные символы проверялись при вводе в текстовое поле. вот правильный код, кнопка не участвует нигде:

$("#id_nickname").bind('input', function(){
        var anonymous_nickname = $("#id_nickname").val();
        if (anonymous_nickname.length <= 2) {
            $('#id_nickname').popover('show');
        }else{
            $('#id_nickname').popover('hide');
        }
    });