写一个可添加自定义标签的输入框（不是富文本）

最新推荐文章于 2024-05-11 18:59:50 发布
最新推荐文章于 2024-05-11 18:59:50 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 可插入自定义标签输入框 文章标签： 前端 javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40247817/article/details/127370414
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

写一个可添加自定义标签的输入框（不是富文本）

前言

今天遇到一个需求，要在输入框内添加自定义标签，又可以键盘输入，具体要求如下，点击按钮，添加一个自定义的标签，然后输入框可以就行输入，也可以使用删除按键进行删除。
在这里插入图片描述

一、代码参考

<div contenteditable="true" class="
最低0.47元/天 解锁文章
赵维希
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
INPUT控件的使用以及一些新标签的使用
yin_mo的博客
05-28 1037
input控件：[input/]标签为单标签，type属性为最基本的属性，除了type属性外， [input/]标签还可以定义很多其他属性。 单选框：性别: [input type=“radio” name=“sex”] 女 [input type=“radio” name=“sex” /] 男 [br /] 复选框：爱好: [input type=“checkbox” name=“hobby” /]游泳 [input type=“checkbox” name=“hobby” /]跑步 都是靠name给的相
一个强大的文本输入框.zip
09-23
5. **文本处理**：可能使用UITextField或UITextView，结合NSAttributedString来实现富文本显示，比如添加不同颜色、字体的标签或联系人信息。 6. **数据模型**：为了存储和管理输入的标签或联系人，可能创建了相应的...
原生 CSS + JS 实现一个标签输入框
we
05-30 1581
标签输入框，演示效果如下： 标签输入框，要实现的功能： 点击输入框可以输入内容 按回车可以生成标签 按退格键可以删除标签 点击标签上的关闭按钮可以 删除标签 页面比较简单，没必要引入一个完整的框架。就用原生的来实现一下吧。 还可以练习下技术。 一、自适应输入框布局 不管什么组件，布局都是最重要的。这个布局分为标签和输入框两个部分，假设 HTML 如下 <div class="tags-content"> <tag>CSS<a class.
前端文本输入框实现带“#”的关键词变色（类型微博的话题 #wink状态#）
de_shy的博客
12-10 1648
本意是研究小程序中实现这个功能的，没有找到好的方法，只能先实现pc端的看看- .- html代码 contenteditable 可以实现盒子内的元素可以编辑，模仿textarea文本框 <div id="box" contenteditable="true"> </div> style样式 #box{ border: 1px solid #CBCBCB; height: 200px; width: 400px; } #box span{ colo
vue项目中封装一个el-input支持输入标签tag类
最新发布
2301_76285550的博客
05-11 462
el-input支持输入标签tag类参照el-select组件源码进行修改！
实现文本框插入标签的参考方案
xiaokar博客
08-02 482
实现文本框插入标签的参考方案
Vue 自定义标签输入框组件
gdgztt的专栏
12-28 746
Vue 自定义标签输入框组件
一个简单的自定义输入框
知足常乐
03-30 1324
今天还是一篇关于自定义View相关的，带来一个大众的，常见的一个输入框，很多的场合下都能遇到，比如验证码，密码框等等
标签输入框tag-input：仿QQ邮箱来增强你的组件交互与界面展示
zhang_hai_cheng的博客
05-23 1002
输入框的场景实在太多太多了，但我们偶尔也会碰到一些个性化的需求，今天给大家介绍的就是类似上面这样，可以显示标签的输入框。 先来假设一下我们的输入需求： 能对输入的内容进行校验、可以在任意位置插入新标签、可以拖动标签进行排序换位置、支持键盘快捷键操作、支持自定义插槽以丰富组件定制化...
vue quill editor 使用富文本添加上传音频功能
11-27
1. 前言 ... 监听上传成功的回调函数，在富文本输入框中插入音频标签 2. 功能实现 2.1 基于Element-ui实现上传组件，并且隐藏（不能让用户点击） <!-- 首先，必须隐藏这个元素：display:none； v-lo
输入框回车生成标签的demo
12-08
在IT领域，特别是前端开发中，"输入框回车生成标签的demo"是一个常见的功能，它主要用于用户输入信息并以标签形式展示，便于管理和展示数据。这个功能在很多应用场景下非常实用，比如社交媒体、论坛、博客评论等，...
jquery表单文本框添加文字标签
11-11
jquery表单文本框添加文字标签 jquery表单文本框添加文字标签 jquery表单文本框添加文字标签 jquery表单文本框添加文字标签
summernote富文本框
04-08
与传统的单行或多行文本输入框不同，富文本框提供了一个类似Word的界面，用户可以在其中进行各种格式设置。summernote作为一个富文本编辑器，它的主要特点是： 1. **用户友好**：设计简洁，操作直观，使得非技术...
slate-master_slate输入框_
09-30
在IT行业中，自定义输入框是一个常见的需求，特别是在构建用户界面和富文本编辑器时。Slate是一个流行的JavaScript库，用于构建可定制的富文本编辑器。标题中的"slate-master_slate输入框_"可能指的是Slate的一个...
IOS应用源码之可扩展的输入框 .rar
07-09
这个“IOS应用源码之可扩展的输入框 .rar”文件很可能是提供了一个自定义的输入框组件，允许用户在输入过程中进行更多的交互和功能扩展。以下是对这个主题的详细讲解： 一、自定义输入框组件 在iOS开发中，通常使用...
富文本框插件
07-05
“editor”标签指向的富文本框插件，可能是一个特定的开源或商业项目，提供了丰富的文本编辑功能和自定义选项。这类插件通常包含以下核心特性： 1. **基本编辑功能**：包括字体选择、字号调整、颜色设置、文本对齐...
HTML基础各种input输入标签总结
fq_fly的博客
12-31 1944
单行文本输入框 <input type="text" value="文本"/> 密码输入框 <input type="password" value="111111"/> 普通按钮 <input type="button" value="普通按钮"> 单选框 <input type="radio" checked/>男 复选...
input里面生成标签
一个前端工作者的博客
10-20 4103
input里面生成标签 方式一，自动增长 缺点，最后过长有显示问题。 优点，光标随着标签变。 组件代码如下：直接引用即可。 <template> <div class="yh-label-input" > <div class="yh-tag-box" ref="tagBox"> <el-tag v-for="(tag,index) in tags" :key="index" closable @close="de
通过div模拟textarea对数据进行编辑及可插入标签
niu_maBoy的博客
07-16 845
下面就是简单的对样式的一些处理，我使用的scss，大家可以改为其他的预处理语言。进行匹配，我这里有个bug就是对标签进行删除时发生的bug，希望有大神可以帮忙完善下。
请帮我写一个富文本输入框
06-08
好的，以下是一个简单的富文本输入框的实现，可以参考： ```html <div contenteditable="true"></div> ``` 使用 `contenteditable` 属性可以将一个元素设置为可编辑状态，从而实现富文本输入框的功能。 如果需要更多的富文本编辑功能，可以使用一些第三方插件或库，例如： - [Quill](https://quilljs.com/) - [TinyMCE](https://www.tiny.cloud/) - [CKEditor](https://ckeditor.com/) - [Summernote](https://summernote.org/) - [Froala Editor](https://www.froala.com/wysiwyg-editor) 这些插件都提供了丰富的富文本编辑功能，可以根据自己的需求选择使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值