Блог

Я пытаюсь создать поле ввода текста, которое преобразует вводимый текст в «кнопку» на экране. Например, в hotmail «новая страница электронной почты» при вводе адресов электронной почты он превратится в маленький объект, похожий на кнопку, с кнопкой удаления, когда вы введете разделитель (точка с запятой). Кто-нибудь знает, как это сделать?

Я сделал что-то вроде обходного пути к тому, что я хочу, где у меня есть div с границей. В div есть поле ввода с невидимым отверстием и скрытой кнопкой. У меня есть функция js, которая принимает входное значение и делает кнопку видимой со значением, но это не совсем то, что я ищу..

на самом деле я только что понял, что stackoverflow также делает это, когда я добавляю теги к сообщению

Это поле с несколькими значениями. Взгляните на это.

Функция не такая сложная. Это список HTML, и каждое выбранное вами значение преобразуется в узел LI и добавляется к этому списку. Поле ввода находится внутри последнего элемента LI, поэтому его курсор всегда может находиться после последнего выбора. Кроме того, вводимое значение присваивается скрытому вводу, который может использоваться на стороне сервера как значение, разделенное запятой.

Вот простой способ подделать это (и похоже, что это похоже на то, что SO делает для тегов):

1. Создайте свой текст <input> и убедитесь, что для его границы и контура установлено значение none.
2. Создайте контейнер для ваших тегов (или кнопок, или чего угодно еще) и поместите его рядом с <input> .
3. Отслеживайте keydown событие на <input> ; когда пользователь пытается ввести символ «разрыва» (например, точку с запятой), создайте кнопку, добавьте ее в контейнер, очистите <input> значение ‘s и предотвратите использование по умолчанию (чтобы символ «разрыва» не вставлялся в тег или не оставлялся в <input> ).

Это основная идея. Как только вы это сделаете, вы можете добавить прослушиватели событий / обработчики к кнопкам или придать им любой желаемый стиль и т.д.

Вот простой пример, который я приготовил:

 var inp = document.getElementById('yourInput'),
    tags = document.getElementById('yourContainer'),
    breaks = {
        186: 1, // semi-colon
        188: 1 // comma
    };

function createTag(txt) {
    var elem = document.createElement('span');
    txt = document.createTextNode(txt);
    elem.appendChild(txt);
    elem.className = 'tag';
    tags.appendChild(elem);
}

function monitorText(e) {
    e = e || window.event;
    e = e.keyCode;
    if (breaks[e]) {
        e = inp.value;
        inp.value = '';
        createTag(e);
        return false;
    }
}

inp.focus();
inp.onkeydown = monitorText;