时间戳

首页 > 解决方案 > 输入焦点时如何删除标签

javascript - 输入焦点时如何删除标签

问题描述

我想删除基于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>

请帮助我提前谢谢！

标签： javascriptjquerytags

解决方案

当您键入退格键时，此程序会隐藏最后一个标签：

$(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>

推荐阅读