如果没有框架呢？原生CSS+JS实现标签输入框
时间：2023-04-05 17:27:04
HTML5
欢迎关注我的公众号：前端侦探最近在项目中需要做一个标签输入框，比较实用，演示效果如下。主要的交互需求就是这样一个点击输入框可以输入内容回车生成标签。按退格键删除标签。单击标签上的关闭按钮可删除标签。我习惯了各种React框架或UI库。你有多久没有接触原生开发了？有时候页面比较简单，不需要引入完整的框架，原生实现完全满足，一起来看看吧1.自适应输入框布局无论什么组件，布局都是最重要的。这个布局分为标签和输入框两部分。假设HTML如下添加标签">
简单修改.tags-content{display:flex;弹性包装：包装；对齐项目：弹性启动；间隙：6px；宽度：400px；框大小：边框框；填充：8px12px；边框：1px实心#D9D9D9；边界半径：4px；字体大小：16px；;溢出：自动；光标：文本；}标签{显示：弹性；对齐项目：居中；填充：4px04px8px；字体大小：16px；行高：24px；背景：#F5F5F5；0,0,0,0.85);cursor:default;}tag-close{width:18px;高度：18px；游标：指针；background:url("data:image/svg+xml,%3Csvgwidth='10'height='10'viewBox='001010'fill='none'xmlns='http://www.w3.org/2000/svg'%3E%3Cpathd='M5.5785l2.93-3.493a.089.089000-.068-.146h-.891a.182.182000-.137.064l-2.4172.88-2.416-2.88a.178.178000-.137-.064h-.89a.089.089000-.069.146L4.4135l-2.933.493a.089.089000.068.146h.89a.182.18200-0.138.064l2.416-2.882.4172.88c.033.04.083.064.137.064h.89a.089.089000.069-.146l-2.93-3.493z'fill='%23000'fill-opacity='.45'/%3E%3C/svg%3E")centerno-repeat;}.tags-input{flex:auto;border:0;outline:0;padding:4px0;line-height:24px;font-size:16px;}.tags-content:focus-within,.tags-content:active{outline:auto#4F46E5;}注意一些实现技巧：标签之间的间隔可以通过gap来实现，以使输入的区域box填充剩余空间，这里使用了flex:auto来让parent保持焦点，这里使用了:focus-within效果如下，但是这里的输入框还是有些问题，如下图，因为输入内容不能跟随宽度自适应，所以有时候会出现文字被截断的情况理想情况下，当输入内容很多的时候，应该整体换行如何？可以用普通的div实现
CSS 