仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable

最新推荐文章于 2024-08-13 08:18:42 发布
最新推荐文章于 2024-08-13 08:18:42 发布
阅读量7.8k 收藏 8
点赞数 3
分类专栏： CSS3 文章标签： html5 新浪微博 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37540004/article/details/72730882
版权
本文介绍了如何利用JQ库At.js和HTML5的contentEditable属性来实现类似新浪微博的@功能。通过引入jQuery、caret.js和at.js库，设置配置项并初始化At.js，可以创建一个可编辑的输入区域，用户可以输入@并弹出用户列表进行选择。文章还提供了一个示例DEMO，并解决了粘贴样式和点击无法聚焦的问题。
摘要由CSDN通过智能技术生成

项目需求 增加@功能

先上效果图



Atwho.js  gitHub地址   https://github.com/ichord/At.js


需要引入的JS：

  <script type="text/javascript" src="jquery.caret.js"></script>    // 这个JS插件用来获取光标位置
  <script type="text/javascript" src="dist/js/jquery.atwho.js"></script> // 这个就是atJS了   

这里是atjs的一些默认配置项 


</

最低0.47元/天 解锁文章
重复过往
关注
专栏目录
jQuery使用At.js插件实现模仿新浪微博@功能特效源码.zip
11-19
jQuery使用At.js插件实现模仿新浪微博@功能特效源码.zip
vue 输入框@人功能组件，支持复制粘贴
不会做饭的程序员的博客
05-07 1968
vue 输入框@人功能组件，支持复制粘贴，多端通用
At.js 开源项目教程
最新发布
gitblog_00843的博客
08-13 830
At.js 开源项目教程 At.jsAdd Github like mentions autocomplete to your application.项目地址:https://gitcode.com/gh_mirrors/at/At.js 1. 项目介绍 At.js 是一个灵感来源于 Github 的自动补全库。它为富文本编辑器（ContentEditable）提供了类似 @ 引用的功能，支持...
segmentfault网站At(@)功能的高效实现
止境
06-12 1488
在textarea中进行事件绑定@，使用正则的方式将@符号匹配出来。然后将数据进行查找。 $("textarea[name=message]").atWho("@",{ tpl: "${name} ${spacenote}", 'data':friend_list }); 数据，可以用sql将用户A的好友【关注】数量全部赛选出来，放入缓存,memcacedA。然后使用js json的方
js仿微博功能，很好的效果
07-21
效果很不错，仿微博效果！！！！！！！！！！！！！！
利用at.js实现微博@功能
浮华饰浮华的博客
11-22 1445
直接贴出前端代码和@的交互逻辑代码 at.js官网 将页面内需要引用的js和css文件从官网下载,然后引入,直接打开这个demo就可以了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="s...
At.js的使用
bajiudongfeng的专栏
08-26 1870
At.js实现在文本框中的搜索功能 使用jian
at.js使用
07-25 242
‘ <script src="__PUBLIC__/client/code/jquery.atwho.js" type="text/javascript"> <link href="__CSS__/jquery.atwho.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> $(function(){
js仿新浪微博消息发布功能
10-20
主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue——@功能PC端实现总结
小王的技术库
06-18 2494
近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。按住shift + @ 的时候，弹出人员选择器人员选择器要跟随光标的位置出现选择时 @的用户标签插入当前的光标位置中
vue-at：Vue的At.js
02-06
视点 实时演示和文档： : Docs由。 Chrome / Firefox / Edge / IE9〜IE11 基于纯文本，没有jQuery，没有额外的节点 内容可编辑/文本区域 头像，自定义模板 Vue2 / Vue1 Vuetify / Element-UI Vue-CLI 3迁移 另请参阅： 动机 很棒，但是： 它基于jQuery和jQuery-Caret。 它引入了额外的节点包装器。 在内容编辑/复制/粘贴时可能不稳定。 最后，我最终创建了这个。 npm i vue-at@2.x # for Vue2 <---- npm i vue-at@1.x
jquery.caret:jQuery插件来操纵输入和textarea元素的插入符位置和选择范围
05-12
jQuery Caret插件 v1.5.2 跨浏览器的jQuery插件，可让您操纵<input>和<textarea>元素的光标位置和选择范围，以及突出显示页面上的文本。 浏览器兼容性 经过测试： IE6 + Chrome合金 火狐浏览器 特征 获取/设置光标位置和所选范围 在光标位置插入文本 用文字替换所选范围 处理浏览器之间的行尾差异 选择/取消选择任何元素中的所有文本 原料药 脱字号 $.fn.caret() 在单个点上询问并操纵输入字段的光标位置，而无需选择任何文本。 .caret()返回Number 获取第一个匹配元素的光标位置。 如果选择一个或多个字符，则返回所选范围的开始位置。 .caret(pos)返回jQuery对象 设置第一个匹配元素的光标位置。 pos Number ：新光标位置。 相对于输入值开头的从零开始的索引。 负数相对于输入值的结尾。 例子：
基于HTML5 contenteditable属性开发的富文本编辑器，PC端版本.zip
02-14
HTML5是现代网页开发的核心标准，它引入了许多新特性，极大地丰富了网页的交互...同时，这也有助于理解HTML5在多媒体和交互性方面的强大能力，以及如何通过纯HTML和JavaScript实现复杂的功能，而不依赖额外的库或框架。
html实现功能实现原理,web 前端 @ 功能 JS 实现分析及其原理
weixin_29817791的博客
05-31 494
最近为实现一个新功能弄的焦头烂额 @xxx 的实现，在实现后写下些心得，供以后会跳入这坑的同志们参考。首先，当让是考虑使用范围，由于项目仅仅需要考虑在 WEBKIT 环境下使用，所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关于选区对象和光标对象，结合 Caret(一个用于判断当前光标位...
at功能实现
xyr05288的专栏
03-02 2597
实现思路： 在可进行@的textarea中输入时，捕捉鼠标按起和键盘按起事件，获取光标位置，若光标前有@且没有空格则将at对象列表框显示出来，选择对象后，将【@前字符串】+【@对象】+ “ ”+【光标后字符串】重新连接起来即为新的textarea内容。其中at对象列表框的位置，是通过在页面中添加一个和textarea同内容但是不可见的div元素实现的。在@对象时，div的内容为【textarea中
仿新浪微博发布时 @ 及 #某话题# 的效果
Alexander Wei的博客
09-18 1866
项目需要实现如下效果： 我实现的思路是，监听textView的变化，然后使用正则匹配出 #话题# 和 @对象所在位置，动态设置文本的颜色，代码如下： #pragma mark - UITextViewDelegate - (void)textViewDidChange:(UITextView *)textView { self.placeholderLbl.hidden...
新浪微博发布文章html,JS实现仿新浪微博发布内容为空时提示功能代码
weixin_30219823的博客
06-04 485
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能。分享给大家供大家参考。具体如下：这里使用JavaScript模拟新浪微博的一个功能，在发布微博的内容为空时，文本框提醒用户这里没有输入内容，本功能让人感觉网页很智能，在和你对话一样，很人性化。本特效引用了一个外部了JS封装类，你可下载到本地使用。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org...
At.js实现的输入框参数提示
09-18 5916
At.js(https://github.com/ichord/At.js)是GitHub上的一个开源项目，MIT授权，主要用来实现类似于微博人人输入@后显示候选好友列表的功能，具体效果可参见官方Demo: http://ichord.github.io/At.js/ 。本文基于版本v0.4.0。     官网上有example.html，但略显复杂，其实At.js的基本使用相当简单，除了作为基
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值