仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable
项目需求 增加@功能
先上效果图
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的一些默认配置项
你可以使用普通的input框 而我们这里用的是H5的 contentEditable 这个神奇而又强大的属性
附上W3C的连接：
http://www.w3school.com.cn/html5/att_global_contenteditable.asp
这里是我写的一个demo
<style type="text/css">
.inputor {
height: 160px;
width: 90%;
border: 1px solid #dadada;
border-radius: 4px;
padding: 5px 8px;
outline: 0 none;
margin: 10px 0;
background: white;
font-size: inherit;
overflow-y: scroll;
}
.inputor:focus {
border: 1px solid rgb(6, 150, 247);
}
.inputor span{
color: #3366FF;
}
</style>
// 这里是dom结构
<div id="editable" class="inputor" contentEditable="true"> //注意这个属性 contenteditable 属性规定是否可编辑元素的内容。 就是你可以往里面填充各种结构标签
但是好像只能以JS的方式去添加 打上去的没有效果 还是标签 可能出于安全考虑 没太研究过
// 这里是JS
<script type="text/javascript">
$(function(){
var at_config = {
at: "@" , // 这个是触发弹出菜单的按键
data: 'people.json', // 这里是源码中封装的一个AJAX 可以是绝对路径相对路径 我这里是一段模拟的JSON
insertTpl: '<span data-id="${id}">@${name}</span>', //你的dom结构里显示的内容 你可以给span加样式 绑定id
displayTpl: "<li > ${name} </li>", // 这个是显示的弹出菜单里面的内容
limit: 200
}；
$('#editable').atwho(at_config) // 初始化
});
</script>
// 模拟的JSON
[{"id":"1","name":"李乾坤"},{"id":"2","name":"王锴"},{"id":"3","name":"孔德博"},{"id":"4","name":"刘攀"},{"id":"5","name":"赵又鸣"}]
最后代码及效果
解决粘贴的样式问题
借用张鑫旭大神的代码 嘿嘿
谷歌可以-webkit-user-modify:read-write-plaintext-only 来解决复制进来的格式问题
(function(){
$('[contenteditable]').each(function() {
// 干掉IE http之类地址自动加链接
try {
document.execCommand("AutoUrlDetect", false, false);
} catch (e) {}
$(this).on('paste', function(e) {
e.preventDefault();
var text = null;
if(window.clipboardData && clipboardData.setData) {
// IE
text = window.clipboardData.getData('text');
} else {
text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
}
if (document.body.createTextRange) {
if (document.selection) {
textRange = document.selection.createRange();
} else if (window.getSelection) {
sel = window.getSelection();
var range = sel.getRangeAt(0);
// 创建临时元素，使得TextRange可以移动到正确的位置
var tempEl = document.createElement("span");
tempEl.innerHTML = "&#FEFF;";
range.deleteContents();
range.insertNode(tempEl);
textRange = document.body.createTextRange();
textRange.moveToElementText(tempEl);
tempEl.parentNode.removeChild(tempEl);
}
textRange.text = text;
textRange.collapse(false);
textRange.select();
} else {
// Chrome之类浏览器
document.execCommand("insertText", false, text);
}
});
});
})();
**点击无法聚焦无法输入问题**
有时候会有残留的@的DOM 比如用户点了shift+@ 没选人提交了 或者提交后被截断了 下次再去点输入框的时候 就会出现失焦无法输入的问题 这个时候你就要自己过滤下空的和残缺的@标签 <span class="atwho-inserted"></span>
仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable相关推荐
- 新浪微博发布文章html,JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本 ...
- js仿新浪微博消息发布功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框 博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
- 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...
- 仿新浪微博滚动，无文字渐显功能
又一款仿新浪微博的文字滚动功能,去掉了滚动开始时候的文字渐显效果,似乎更明淅了,又一种风格的新浪微博大厅文字滚动,要的就复制代码吧. <!DOCTYPE HTML> <html la ...
- jQuery UI 实现 仿购物车功能 简洁的js
效果图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 仿新浪微博的ListView下拉更新功能
由于最近做的项目中也用到了这个功能,今天刚好实现了下,就趁现在有时间写篇博客分享下.在做的时候也参考了下别人的代码,毕竟站在巨人的肩膀上才会是自己更加强大.哈哈!先看看新浪的下拉更新是什么样的吧! O ...
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- html新浪搜索框,JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: JS+CSS仿类似新浪微博搜索框的效果 * { padding:0; margin:0;} body { ...
最新文章
- mysql 截断多个表,PHPamp; MySQL：截断多个表
- ubuntu安装virtualbox
- dwr框架ajax验证账号,dwr-Ajax开源框架
- ssh远程登录执行shell脚本，找不到jps
- Terminal中输入一行命令快速移动光标至行首行尾
- 2013年6月份安徽省计算机等级考试二级c语言答案,2013年计算机二级C语言上机试题九及答案...
- 科技英语翻译计算机化考试,2017年英语四级翻译范文之考公热
- c语言作业答案第四章,C语言程序的设计课件源程序及习题的答案第4章.ppt
- apache的配置文件httpd.conf
- 稳压二极管的工作原理是什么？
- HTML/CSS class6 table布局
- HTTP中 referer 什么意思
- mac卸载了xcode后，运行软件提示：xcode-select: error: invalid developer directory
- zz:几天猎头生活的感想
- Win 7中excel 2016未响应
- C语言中 枚举变量与枚举值，枚举类型变量再赋值问题
- EasyExcel增加下拉选择框
- 回车符号和换行符号原来是这样产生的
- 百度移动优化：关于移动端点击图片放大有多少人注意？
- 【Python】Python项目打包发布（一）（基于Pyinstaller打包多目录项目）