输入焦点时如何删除标签答案

【问题标题】：How to remove tags when input is focused输入焦点时如何删除标签
【发布时间】：2021-03-06 04:34:37
【问题描述】：

我想删除基于backspace keypress的标签

输入字段需要始终关注它，所以我无法从容器中删除输入字段

问题：我想根据每个backspace keypress 删除标签，但焦点始终是input 元素

$(function(){
   $('#input').focus();
})

#tagsWrapper{
    width: 400px;
    height: auto;
    border: 1px solid #989898;
    padding: 3px;
}

#tagsWrapper input{
  width:100%;
  border: 0;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

</head>


<div id="tagsWrapper">
   <div id="tags">
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
      
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
      
      
            <div class="mdc-chip" role="row">
        <div class="mdc-chip__ripple"></div>
        <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith</span>
          </span>
        </span>
        <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
      </div>
   </div>
   <input type="text" id="input">
</div>

请帮助我提前谢谢！

【问题讨论】：

标签： javascript jquery tags

【解决方案1】：

当你输入退格键时，这个程序会隐藏最后一个标签：

$(function() {
 $('#input').focus();

  $("#input").on("keydown", function(event) {
   if(event.which == 8){
     $("div[role=row]:visible").last().hide();
   }
  });
})

#tagsWrapper {
  width: 400px;
  height: auto;
  border: 1px solid #989898;
  padding: 3px;
}

#tagsWrapper input {
  width: 100%;
  border: 0;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

</head>


<div id="tagsWrapper">
  <div id="tags">
    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith1</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>

    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith2</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>


    <div class="mdc-chip" role="row">
      <div class="mdc-chip__ripple"></div>
      <span role="gridcell">
          <span role="button" tabindex="0" class="mdc-chip__primary-action">
            <span class="mdc-chip__text">Jane Smith3</span>
      </span>
      </span>
      <span role="gridcell">
          <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
        </span>
    </div>
  </div>
  <input type="text" id="input">
</div>

【讨论】：

非常好的和干净的解决方案非常感谢您！后悔只有 1 票