Jquery Ta git, чтобы разрешить ввод только при нажатии на доступные теги в окне ввода Ta git - PullRequest
Новая
       1

Jquery Ta git, чтобы разрешить ввод только при нажатии на доступные теги в окне ввода Ta git

0 голосов
/ 09 мая 2020

Используя Jquery Ta git. У меня есть текстовое окно ввода ta git с предопределенными тегами под окном ввода.
Щелчок по тегам, показанным ниже, заполняет текстовое окно ввода Ta git - работает нормально. Я хотел бы запретить пользователю вводить текст в текстовом окне и разрешать ТОЛЬКО щелкать доступные теги, показанные под окном ввода.

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

Я думал, что HTML "отключено" подойдет, но, похоже, программа Ta git переопределила его. 

<div class="container">        
    <form id="the_form" method='post' action="" enctype="multipart/form-data">

        <div class="form-group">
            <label for="tags">For easy searching, choose the tags below or enter your own tags:</label>
            <input class="form-control" name="myTags" type="text" id="myTags" value="">

            <p class="super_tag" data-tag="tag">One</p>
            <p class="super_tag" data-tag="tag">Two</p>
            <p class="super_tag" data-tag="tag">Three</p>
            <p class="super_tag" data-tag="tag">Four</p>

        </div>       
    </form>
</div>

<script>
$(document).ready(function(){        
    //Add super tags to tagit window
    $(".super_tag").click(function(){
        var super_tag = $(this).text();
        $("#myTags").tagit("createTag", super_tag);
    });    
});
</script>

1 Ответ

0 голосов
/ 10 мая 2020

Это не дает прямого ответа на мой вопрос, так как я не мог понять, как использовать Jquery Ta git, чтобы делать то, что я хотел.

Поэтому я создал специальную процедуру для этого:

  1. Добавляет / удаляет из списка тегов в видимое поле DIV,
  2. Добавляет / удаляет из скрытого текстового поля ввода (для обработки формы)
  3. Добавляет / Удаляет из списка тегов по мере добавления или удаления тегов
  4. Пользователь не может вручную вводить текст в видимом поле для создания каких-либо пользовательских тегов

Полный код ниже с некоторыми CSS для внешний вид тега: 

<html lang="en">
<head>      
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
.group_tag {
  height: 23px;
  width: auto;
  border: 1px solid #FFE082;
  background-color: #FFE082;
  border-radius: 6px;
  line-height: 24px;
  text-align: center;
  display:inline-block;
  padding-right: 10px;
  padding-left: 10px;
  font-family: Arial, sans-serif;
  font-size: 100%;
  color: #555555;
  margin-bottom: 2px;
  cursor: pointer;  
}
.group_tag:hover, .group_tag:hover {
    background-color:#FFCA28;  
    border: 1px solid #FFCA28;
}        
</style>
<div class="container">        
    <form id="the_form" method='post' action="" enctype="multipart/form-data">
        <div class="form-group">            
            <input class="form-control" name="tag_added_hidden" type="hidden" id="tag_added_hidden" value="" style="width:100%;">
        </div>   
    </form>

    <p style="margin-bottom:5px;">Choose the Group you wish associate this posting with:</p>
    <div id="tag_added" style="padding:3px;min-height:20px;border: thin solid black"></div>            
    <div id="group_tags" style="margin-top:10px;">
        <span class="group_tag add">One</span>
        <span class="group_tag add">Two</span>
        <span class="group_tag add">Three</span>
        <span class="group_tag add">Four</span>
    </div>

</div>
<script>
$(document).ready(function(){

    //Add tags to list and hidden input field
    $("body").on('click', '.add', function(){
        var group_tag = $(this).text();
        var group_tag_comma = group_tag+',';//for hidden csv input field
        console.log(group_tag_comma);
        $('#tag_added_hidden').val($('#tag_added_hidden').val() + group_tag_comma);
        $('#tag_added').append('<span class="group_tag remove" style="margin-right:3px;">'+group_tag+' <span class="x" style="position:relative; top:-2px;">x</span></span>')
        $(this).remove();
    });

    //remove tags from list and hidden input field
    $("body").on('click', '.remove', function(){
        var group_tag = $(this).text().slice(0, -2);//get tag string and remove the 'x' and extra space        
        //remove tag from hidden input field,';
        var hidden_field = $('#tag_added_hidden').val();//get text of input field
        var result = hidden_field.replace(group_tag+',', "");//remove tag from input field
        $('#tag_added_hidden').val(result);//replace result into input field  
        $(this).remove();//remove tag from list
        $('#group_tags').append('<span class="group_tag add" style="margin-right:3px;">'+group_tag+'</span>')
    });

});
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...