Как использовать ввод тегов бутстрапа с тегом textarea (роль данных = tagsinput)

 <textarea id="Box" class="tags form-control" placeholder="X Axis values"></textarea>

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

Как использовать ввод тегов бутстрапа с текстовой областью? Я применил data-role="tagsinput". Но ввод тегов не работает. как мы знаем, у нас такая же проблема в Stackoverflow. но для этого нет решения.

нужно решение/подсказка для этого Как использовать ввод тегов бутстрапа с текстовое поле


javascript html tags bootstrap-modal bootstrap-tags-input
person Sudheer babu    schedule 09.12.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Теги начальной загрузки-ввод does not work with textarea. Поддержка не предоставляется.

Однако вы можете использовать его с input type="text" и применить следующий css, чтобы он работал как текстовое поле.

.bootstrap-tagsinput {
min-height: 100px;
}

см. эту ссылку

person abhit    schedule 09.12.2016
comment
я обновил ссылку, проверьте ее............github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/38 - person abhit; 12.12.2016
comment
Не будет выглядеть как текстовая область. Он только увеличивает высоту, а курсор находится посередине. - person Hasan Wajahat; 14.02.2020

arrow_upward
0
arrow_downward

попробуйте этот css для ввода текста для прокрутки на поле Input Like textarea

.tags-input {
      max-width: 100%;
      line-height: 22px;
      overflow-y: scroll;
      overflow-x: scroll;
      height: 65px;
      cursor: text;
 }
person Hussain Patel    schedule 16.01.2018

arrow_upward
0
arrow_downward

следуйте этому шагу

<style>
.bootstrap-tagsinput {
    line-height: 15px !important;
    min-height: 165px;
    padding-top: 20px;
    padding-bottom: 20px
}

span.tag.label {
    position: relative;
    float: left;
    margin: 2px 5px;
}

.bootstrap-tagsinput input {
    position: relative;
    float: left;
    height: auto;
    margin-top: 4px;
    margin-left: 5px;
    padding: 0px;
    text-align: left;
    width: auto;
}
<style/>
<input type="text" class="form-control inputtags" data-role="tagsinput" name="keywords">
person Alauddin Afif Cassandra    schedule 16.07.2020