[英]How to remove tags when input is focused
我想根据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>
请帮助我提前谢谢！
当您键入退格键时，此程序会隐藏最后一个标签：
$(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>
聚焦时将 class 添加到输入，未聚焦时将其移除
[英]Add class to an input when its focused, and remove it when isnt focused
JavaScript表单验证。 使用onfocus专注于输入字段时如何消除错误
[英]Javascript Form Validation. how to remove error when focused on a input field using onfocus
Internet Explorer 10 和 11 在输入焦点时删除占位符文本
[英]Internet Explorer 10 and 11 remove placeholder text when the input is focused
移动浏览器+专注时删除输入字段值文本突出显示？
[英]Mobile browsers + remove input field value text highlighting when focused?
如何在输入集中时阻止表单提交，并在不集中时使用vuejs2启用表单提交？
[英]How to prevent form submit when input is focused and enable it when out of focused with vuejs2?
如果已经聚焦时单击文本输入，该怎么办-在iPhone上
[英]How to do something if text input is clicked when already focused - on iPhone
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.