前端文本输入框实现带“#”的关键词变色（类型微博的话题 #wink状态#）

最新推荐文章于 2024-06-13 18:31:56 发布

de_shy

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量1.9k

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/de_shy/article/details/121852468

版权

本意是研究小程序中实现这个功能的，没有找到好的方法，只能先实现pc端的看看- .-

html代码
contenteditable 可以实现盒子内的元素可以编辑，模仿textarea文本框

<div id="box"  contenteditable="true">				
</div>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

de_shy

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

有一棵树的博客

02-11

1529

前端实现json动画（附带示例）

最新发布

brhhh_sehe的博客

12-11

437

lottie-web提供了很多的控制动画播放的方法，下面是一些常用的方法。可以下载想要的json动画。显示json的帧数详情。

2 条评论您还未登录，请先登录后发表或查看评论

前端搜索框怎么实现关键字变色？

Youyzq的博客

04-27

2138

要达成的效果思路先通过input的input事件，获取到输入框里输入的关键字，再把请求回来的数据做一个预处理，在渲染到页面上代码预处理函数 // 传入要匹配的关键字和要被更改的字符串, export default function(kw, str) { // 添加正则 const reg = new RegExp(kw, 'ig') // ig 是所有的意思而非在发现第一个匹配项时立即停止 // 使用replace方法替换元素产生高亮 return str.replace(r

仿新浪微博的插入#话题#

Let's GO

07-04

3811

最近看到其他网上有写仿新浪微博插入话题这个功能，具体就是当用户输入"#"这个字符以后，会跳出一个选项让用户选择一个话题，然后在输入框中会显示#XX话题#，点击删除会一下把整个话题删除，而不是一个个删除，并且#XX话题#会变色。我的想法，首先肯定是监听EditText的输入，当用户输入"#"之后，Activity就会跳转到选择话题的另外一个Activity，用户点击一个话题之后，通过onActi

前台实现文本框中c#关键字变色及提示

08-17

资源共3个JS和一个HTML 实现了前台文本框输入c#代码时的代码提示以及关键字变色在线编译器的好帮手

jQuery实现关键字变色

不争气争口馒头

10-03

3158

//js代码 $（function）{ //关键字变色 var searchText = $("#autoflag").val();//获取你输入的关键字； var regExp = new RegExp(searchText, "g");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了； $(".p").each(function()/

vue项目中一行文本文字根据关键字改变颜色改变展示颜色2

qq_46016217的博客

12-28

1253

vue项目中一行文本文字根据关键字改变颜色改变展示颜色2

vue 网页文字中带#的话题颜色高亮

weixin_34293059的博客

11-02

681

网页中显示文字时，带#开始和结束的文字蓝色高亮，就像微博话题一样效果如下 html <span v-html="parseComments('#吃货节#有什么好吃的')"></span> // 方法里面可以是变量，这里只是个演示 js parseComments (value) { var exp ...

js中html标签变文字颜色,javascript – 更改contenteditable div中文本的颜色

weixin_33499681的博客

06-27

937

您可以使用HTML编辑API来处理此类用例.参考这里：https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html简而言之,使用execCommand和styleWithCSS来实现您想要的效果. styleWithCSS将允许您控制是否应该通过execCommand方法将CSS或HTML格式生成到文档中.传递true以使用CSS样式而不是生成字...

css设置文本输入框位置

04-06

要设置文本输入框的位置，可以使用CSS的position属性。例如，要将一个文本输入框放置在页面的顶部，可以这样设置CSS： ```css input { position: absolute; top: 0; left: 0; } ``` 这将把文本输入框的位置...

眨眼情感：使用＃标签，表情符号:)和表情符号对短语进行准确，快速的情感评分:party_popper:

02-05

使用wink-sentiment分析推文，产品评论，社交媒体内容或任何文本wink-sentiment 。它基于和; 它的功能包括：智能否定处理；例如，短语“好产品”将获得正分，而“不是好产品”将得到负分。自动检测和评分文本...

Wink-Tokenizer：跨语言文本令牌自动识别与标记

标题“wink-tokenizer:多语言令牌生成器，可以自动标记每个令牌的类型”暗示了该工具的核心功能是进行多语言文本的令牌化处理，并能够自动识别和标记出文本中的不同元素，如单词、标点符号等，以便于文本分析和处理...

uni-app 微信小程序 搜索关键字后结果中的关键字变色

棒怡情的专栏

11-02

926

实现搜索关键字，搜索到的内容中把包含的此字变为蓝色。 3.JavaScript代码写法。步骤1、中布局引用的方法$options.filters.formatTitle。注意点：因为是运行到小程序里面。所以设置颜色的时候要使用标签才能使颜色生效。实现方式如下：此方式是uniapp开发运行到微信小程序的代码。如图：想实现搜索关键字，搜索到的内容中把包含的此字变为蓝色。此fileters和methods方法平级。

textarea 实现关键字变色

qq_41213315的博客

10-18

8854

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div> <style type="text/css"> .in, .out { paddi

微信小程序搜索关键字变红

weixin_39289004的博客

08-05

1285

index.js //获取应用实例 const app = getApp(); const getInf = (str, key) => str.replace(new RegExp(${key}, ‘g’), %%${key}%%).split(’%%’); Page({ data: { keyName: null, listData: [ {“id”:“1”, “fund_id”: “1...

vue项目一行文本修改关键字颜色

weixin_49072460的博客

07-08

3004

关键字修改颜色

CSS 字体颜色渐变

weixin_47981445的博客

06-13

638

CSS 字体颜色渐变，适配多端展示

新浪微博插入话题后部分文字选中的js实现（控制鼠标指针位置/自动选择指定文本）

hellohorizon的编程笔记

04-22

1810

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

js 给选中的文字添加颜色、替换文字内容...，选中状态去除后更改还在（document.execCommand）

xxx

11-17

2065

先选中文字后点击按钮更改选中文字状态。