仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable
2017-05-25 16:34
399 查看
项目需求 增加@功能
先上效果图
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);
}
4000
});
});
})();
**点击无法聚焦无法输入问题**
有时候会有残留的@的DOM 比如用户点了shift+@ 没选人提交了 或者提交后被截断了 下次再去点输入框的时候 就会出现失焦无法输入的问题 这个时候你就要自己过滤下空的和残缺的@标签 <span class="atwho-inserted"></span>
先上效果图
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);
}
4000
});
});
})();
**点击无法聚焦无法输入问题**
有时候会有残留的@的DOM 比如用户点了shift+@ 没选人提交了 或者提交后被截断了 下次再去点输入框的时候 就会出现失焦无法输入的问题 这个时候你就要自己过滤下空的和残缺的@标签 <span class="atwho-inserted"></span>
相关文章推荐
- Zero Clipboard js+swf实现的复制功能使用方法
- js实现html5占位文本功能,支持password输入框
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 使用js实现大小写字母转换功能
- 【源码】实现Android闹钟功能使用HTML+JS,并附带Alarm代码分享
- 使用js实现两点之间距离计算功能
- 使用JS+CSS实现tab功能
- html5指南-4.使用Geolocation实现定位功能
- Zero Clipboard js+swf实现的复制功能使用方法
- jsData 使用教程(三) 实现增删改功能
- 使用js实现贪吃蛇的部分功能
- 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js
- Zero Clipboard js+swf实现的复制功能使用方法
- 使用JS实现倒计时功能(http://www.cnblogs.com/doll-net)
- js实现简单的单击图片放大功能---仿新浪微博图片放大效果
- 使用js简单实现登录功能
- 使用UniWeibo实现Unity3d里分享到新浪微博功能
- 【源码】实现Android闹钟功能使用HTML+JS,并附带Alarm代码分享
- 使用JS实现JQuery的document.ready功能
- Zero Clipboard js+swf实现的复制功能使用方法