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

最新推荐文章于 2021-06-17 01:15:06 发布
VIP文章 最新推荐文章于 2021-06-17 01:15:06 发布
阅读量7.7k 收藏 8
点赞数 3
分类专栏： CSS3 文章标签： html5 新浪微博 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37540004/article/details/72730882
版权

项目需求 增加@功能

先上效果图



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元/天 解锁文章
重复过往
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
jQuery插件atwho.js实现@提示框过程中碰到的问题
ahq2018的博客
03-01 799
场景： demo主要使用技术: **vue, elementUI, jQuery, atwho.js** 最终效果： 用户点击分享按钮, 弹出如下的分享对话框, 接着用户在多行文本输入框textarea中输入@时, 会在@下方出现提示框, 可以使用键盘上下方向键或鼠标选择提示框中的选项 关键代码: renderAt() { let _this = this; $(function () { let atConfig = { at: "@", da
At.js实现的输入框参数提示
09-18 5866
At.js(https://github.com/ichord/At.js)是GitHub上的一个开源项目，MIT授权，主要用来实现类似于微博人人输入@后显示候选好友列表的功能，具体效果可参见官方Demo: http://ichord.github.io/At.js/ 。本文基于版本v0.4.0。     官网上有example.html，但略显复杂，其实At.js的基本使用相当简单，除了作为基
艾特某人代码实现_Vue@某人，At某人，仿新浪微博@某人，@user，艾特，艾特某人...
weixin_35285401的博客
01-14 1461
展开更多群成员import getCaretCoordinates from 'textarea-caret'export default {props: {value: { //输入框初始值type: String,default: null},suffix: { //插入字符链接type: String,default: ' '},loop: { //上下箭头循环type: Boolean,d...
js @功能实现
Stavin Li的博客
11-20 3634
PC端 html <link rel="stylesheet" href="/atwho/jquery.atwho.css" /> <script type="text/javascript" src="/atwho/jquery.caret.js"></script> <script type="text/javascript" src="/atw...
html5 表情插件,仿github表情符号和at自动完成jquery插件
weixin_29533233的博客
06-17 335
At.js是一款仿github表情符号和at自动完成jquery插件。通过At.js插件，可以在表单，后某个可编辑的div元素，或某些所见即所得的文本编辑器中，通过快捷方式来自动补全表情符号，或at某人的操作。At.js插件的特点还有：支持IE7+的textarea元素。支持HTML5 contentEditable元素(不包括IE8).可以监听任何字符，不单单只是@字符。使用模板来返回格式化数据...
At.js的使用
bajiudongfeng的专栏
08-26 1833
At.js实现在文本框中的搜索功能 使用jian
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 ：新光标位置。 相对于输入值开头的从零开始的索引。 负数相对于输入值的结尾。 例子：
At.js – 用于 Web 应用程序的自动完成库
weixin_33854644的博客
05-01 162
　　At.js 是一个自动完成库，用来实现自动完成提示，表情等，就像你在 Github 或 Twitter 上看到的一样。它支持 HTML5 contentEditable 元素。你可以听任何字符，而不仅仅是 '@' 符号，可为不同的字符设置多个监听器以实现不同的行为和数据。 　　监听器事件可以绑定到多个 Inputors（输入器） 。除了鼠标之外还支持键盘控制。您可以用一组可配置的回调来使用自...
jquery.atwho.js
weixin_34293902的博客
11-14 954
2019独角兽企业重金招聘Python工程师标准>>> ...
利用at.js实现微博@功能
浮华饰浮华的博客
11-22 1375
直接贴出前端代码和@的交互逻辑代码 at.js官网 将页面内需要引用的js和css文件从官网下载,然后引入,直接打开这个demo就可以了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="s...
js仿新浪微博消息发布功能
10-20
主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
meteor-caretjs:Caret.js 的 Meteor 包
07-09
用于 Meteor 的 #Caret.js ＃＃描述 从输入器获取插入符号位置或偏移量 ＃＃用法 目前这只是将库添加到页面。 有关更多详细信息，请参阅 。 // Get caret position $('#inputor').caret('position'); // => {left: 15, top: 30, height: 20} // Get caret offset $('#inputor').caret('offset'); // => {left: 300, top: 400, height: 20} var fixPos = 20 // Get position of the 20th char in the inputor. // not working in `contentEditable` mode $('#inputor').caret('positio
前端项目-Caret.js.zip
09-02
前端项目-Caret.js,Get caret position and offset from inputor
jquery-caret:从 https 分叉
06-10
Caret.js 从输入器获取插入符号位置或偏移量 这是在中工作的核心功能。 现在，它变成了一个简单的jquery插件，让每个人都可以使用它。 当然， At.js 也在使用这个插件。 支持 iframe 上下文 现场演示 用法 // Get caret position $ ( '#inputor' ) . caret ( 'position' ) ; // => {left: 15, top: 30, height: 20} // Get caret offset $ ( '#inputor' ) . caret ( 'offset' ) ; // => {left: 300, top: 400, height: 20} var fixPos = 20 // Get position of the 20th char in the inputor. // not working i
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 [email protected] # for Vue2 <---- npm i [email protected]
[removed]DOM.js（替代jquery）和Editable.js（使用contenteditable编辑所见即所得）
05-16
DOM.js DOM.js是1.4KB js（最小化）中的jquery替代品。 它包括用于加载，选择器...Editable.js Editable.js通过contenteditable增强了所见即所得的编辑功能，从而可以使用自定义工具栏（在html中定义）来跨浏览器使用。
使用HTML5中的contentEditable来将多行文本自动增高
09-28
主要介绍了使用HTML5中的contentEditable来将文本自动增高的方法,文章先对contentEditable这个HTML5中的新属性作了一个简单介绍,需要的朋友可以参考下
基于HTML5 contenteditable属性开发的富文本编辑器，PC端版本.zip
最新发布
02-14
html5开发
cehighlighter.js:轻量级 javascript 库，为 contenteditable 启用语法高亮
06-03
CEHighlighter.js 是一个轻量级的 javascript 库，它可以在 HTML 元素中实现简单的语法高亮并将它们转换为可编辑的内容。 默认情况下，它会突出显示链接、推特提及和主题标签。 可以使用您自己的正则表达式和模板...
js在ie追加html,javascript – Contenteditable：将光标移动到插入的html节点之外(webkit / ie)...
06-09
对于在IE中追加HTML，可以使用以下代码： ```javascript var container = document.getElementById('container'); var newElement = document.createElement('div'); newElement.innerHTML = '<p>New HTML content</p>'; container.appendChild(newElement); ``` 对于在contenteditable元素中插入HTML并将光标移动到插入的HTML节点之外，可以使用以下代码： ```javascript var selection = window.getSelection(); var range = selection.getRangeAt(0); var container = range.commonAncestorContainer; var newElement = document.createElement('div'); newElement.innerHTML = '<p>New HTML content</p>'; range.deleteContents(); range.insertNode(newElement); selection.removeAllRanges(); range.setStartAfter(newElement); range.setEndAfter(newElement); selection.addRange(range); ``` 该代码片段在Webkit和IE中均可使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值