Jquery打造的类似新浪微博@提醒功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery打造的类似新浪微博@提醒功能_网页代码站(www.webdm.cn)</title>
<style>
* { margin:0; padding:0;}
textarea { margin:20px 0 0 20px;}
</style>
<script src="http://www.webdm.cn/themes/script/jquery.js"></script>
<script>
$(function() {
var calculator = {
// key styles
primaryStyles: ['fontFamily', 'fontSize', 'fontWeight', 'fontVariant', 'fontStyle',
'paddingLeft', 'paddingTop', 'paddingBottom', 'paddingRight',
'marginLeft', 'marginTop', 'marginBottom', 'marginRight',
'borderLeftColor', 'borderTopColor', 'borderBottomColor', 'borderRightColor',
'borderLeftStyle', 'borderTopStyle', 'borderBottomStyle', 'borderRightStyle',
'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderRightWidth',
'line-height', 'outline'],
specificStyle: {
'word-wrap': 'break-word',
'overflow-x': 'hidden',
'overflow-y': 'auto'
},
simulator : $('<div id="textarea_simulator"/>').css({
position: 'absolute',
top: 0,
left: 0,
visibility: 'hidden'
}).appendTo(document.body),
toHtml : function(text) {
return text.replace(/\n/g, '<br>')
.split(' ').join('<span style="white-space:prev-wrap"> </span>');
},
// calculate position
getCaretPosition: function() {
var cal = calculator, self = this, element = self[0], elementOffset = self.offset();
// IE has easy way to get caret offset position
/*if ($.browser.msie) {
// must get focus first
element.focus();
var range = document.selection.createRange();
$('#hskeywords').val(element.scrollTop);
return {
left: range.boundingLeft - elementOffset.left,
top: parseInt(range.boundingTop) - elementOffset.top + element.scrollTop
+ document.documentElement.scrollTop + parseInt(self.getComputedStyle("fontSize"))
};
}
*/ cal.simulator.empty();
// clone primary styles to imitate textarea
$.each(cal.primaryStyles, function(index, styleName) {
self.cloneStyle(cal.simulator, styleName);
});
// caculate width and height
cal.simulator.css($.extend({
'width': self.width(),
'height': self.height()
}, cal.specificStyle));
var value = self.val(), cursorPosition = self.getCursorPosition();
var beforeText = value.substring(0, cursorPosition);
atpos=beforeText.lastIndexOf('@');
if(atpos!=-1){
beforeText=beforeText.substring(0,atpos)
afterText = value.substring(atpos);
}else{
afterText = value.substring(cursorPosition);
}
var before = $('<span class="before"/>').html(cal.toHtml(beforeText)),
focus = $('<span class="focus"/>'),
after = $('<span class="after"/>').html(cal.toHtml(afterText));
cal.simulator.append(before).append(focus).append(after);
var focusOffset = focus.offset(), simulatorOffset = cal.simulator.offset();
// alert(focusOffset.left + ',' + simulatorOffset.left + ',' + element.scrollLeft);
return {
top: focusOffset.top - simulatorOffset.top - element.scrollTop
// calculate and add the font height except Firefox
+ ($.browser.mozilla ? 0 : parseInt(self.getComputedStyle("fontSize"))),
left: focus[0].offsetLeft// - cal.simulator[0].offsetLeft - element.scrollLeft
};
}
};
$.fn.extend({
getComputedStyle: function(styleName) {
if (this.length == 0) return;
var thiz = this[0];
var result = this.css(styleName);
result = result || ($.browser.msie ?
thiz.currentStyle[styleName]:
document.defaultView.getComputedStyle(thiz, null)[styleName]);
return result;
},
// easy clone method
cloneStyle: function(target, styleName) {
var styleVal = this.getComputedStyle(styleName);
if (!!styleVal) {
$(target).css(styleName, styleVal);
}
},
cloneAllStyle: function(target, style) {
var thiz = this[0];
for (var styleName in thiz.style) {
var val = thiz.style[styleName];
typeof val == 'string' || typeof val == 'number'
? this.cloneStyle(target, styleName)
: NaN;
}
},
getCursorPosition : function() {
var thiz = this[0], result = 0;
if ('selectionStart' in thiz) {
result = thiz.selectionStart;
} else if('selection' in document) {
var range = document.selection.createRange();
if (parseInt($.browser.version) > 6) {
thiz.focus();
var length = document.selection.createRange().text.length;
range.moveStart('character', - thiz.value.length);
result = range.text.length - length;
} else {
var bodyRange = document.body.createTextRange();
bodyRange.moveToElementText(thiz);
for (; bodyRange.compareEndPoints("StartToStart", range) < 0; result++)
bodyRange.moveStart('character', 1);
for (var i = 0; i <= result; i ++){
if (thiz.value.charAt(i) == '\n')
result++;
}
var enterCount = thiz.value.split('\n').length - 1;
result -= enterCount;
return result;
}
}
return result;
},
getCaretPosition: calculator.getCaretPosition
});
});
</script>
<script type="text/javascript">
/**
* 获取光标所在的字符位置
* @param obj 要处理的控件, 支持文本域和输入框
* @author hotleave
*/
function getInputPosition(obj){
var result = 0;
if(obj.selectionStart){ //非IE浏览器
result = obj.selectionStart
}else{ //IE
var rng;
if(obj.tagName == "TEXTAREA"){ //如果是文本域
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
}else{ //输入框
rng = document.selection.createRange();
}
rng.moveStart("character",-event.srcElement.value.length);
result = rng.text.length;
}
return result;
}
/*控制元素可见性*/
function showHide(classorid,show){
if(show>0){
$(classorid).show();
}else{
$(classorid).hide();
}
}
/************/
function getValue(obj){
// var pos = getInputPosition(obj); 这个方法或者插件里的方法都OK
var pos = $(obj).getCursorPosition();
var preval=obj.value.substr(0,pos);
var atpos=preval.lastIndexOf('@');
if(atpos>=0){
var atval=preval.substring(atpos+1,pos);
mousepos = $('textarea').getCaretPosition();
}
if(atval&&atval.length<20){
if(atval.match(/[^\u4e00-\u9fa5\w@_-]/g)){//匹配@后面有哪些内容时不出现提示
$('.wb_fb_notice').hide();
}else{
if($('.wb_fb_notice').html()==null){
$('body').append("<div class='wb_fb_notice' onclick=\"showHide('.wb_fb_notice',0)\">轻敲空格完成输入</div>");
$('.wb_fb_notice').css({left:$('#textarea').offset().left+mousepos.left,top:$('#textarea').offset().top+mousepos.top,position:'absolute',border:'1px solid #ccc',padding:'5px',background:"#fff",zIndex:'22',fontSize:'12px'});
}else{
$('.wb_fb_notice').css({left:$('#textarea').offset().left+mousepos.left,top:$('#textarea').offset().top+mousepos.top,position:'absolute',border:'1px solid #ccc',padding:'5px',background:"#fff",zIndex:'22',fontSize:'12px'});
$('.wb_fb_notice').show();
}
}
}else{
$('.wb_fb_notice').hide();
}
}
</script>
</head>
<body>
<div>
<textarea rows="6" cols="60" onmouseup="getValue(this)" onkeyup="getValue(this)" onblur="showHide('.wb_fb_notice',0)" id="textarea" >
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
Jquery打造的类似新浪微博@提醒功能的更多相关文章
- jquery实现百度类似搜索提示功能（AJAX应用）
有时候觉得百度那个输入内容就有提示的工具很神奇,它究竟是怎么做到的呢?以前在一个进销存系统中也做过这么个功能,但是远远不及百度的功能强大,百度可以输入首字母,关键字拼音,或关键字都可以匹配,有时在想, ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jQuery打造智能提示插件二（可编辑下拉框）
在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...
- 改进iOS客户端的升级提醒功能
改进iOS客户端的升级提醒功能 功能设计 先申明一下,我是码农,不是一个产品经理,但我觉得现有市面上的很多 App,设计的 "升级提示功能" 都不太友好.在此分享一下我的想法,欢迎 ...
- 12、ABPZero系列教程之拼多多卖家工具 拼团提醒功能登录拼多多实现
上篇文章已经完成了整个拼多多拼团提醒功能,本篇继续完成拼多多帐号登录,拼多多帐号登录的目的是为了获取拼团商品的SKU和订单号,便于商家备货. 以下是拼多多官方的后台登录,要实现的功能并不是直接在这里登 ...
- iOS开发中UILocalNotification本地通知实现简单的提醒功能
这段时间项目要求做一个类似的闹钟提醒功能,对通知不太熟悉的我,决定先用到xcode自带的本地通知试试,最终成功的实现了功能,特整理分享下. 它的表现特点: app关闭的时候也能接收和显示通知. app ...
- jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- jquery each函数 break和continue功能
jquery each函数 break和continue功能幸运的是另一个突破,持续一个jQuery循环方式.你可以打破在函数返回一个jQuery参数虚假循环.一个可以继续执行只是在做不指定返回值或返 ...
- C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 网络订单提醒功能，网点区域功能增强
客户端会提醒是否有网络订单来了,这样及时处理网络上的用户下单,当然也会有手机短信系统,全国几千个网点就可以协同作战了,竟然有序的处理海量用户的下单.网络订单提醒功能增强效果如下: 系统每5分钟会检查一 ...
随机推荐
- ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等) ZT
http://www.cnblogs.com/ranran/p/4065619.html http://www.cnblogs.com/jxlsomnus/p/4450911.html 以下是关于AS ...
- java MAVEN 项目出现红叉
pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
- Sublime Text 3 配置Java开发
Sublime Text 3 配置Java开发 内嵌模式 在Sublime内部输出面板显示执行过程 配置JavaC - INSET.sublime-build 打开Sublime的包目录(选择菜单:P ...
- thinkphp nginx php-fpm url rewrite 导致 404 错误
## thinkphp nginx php-fpm url rewrite 导致 404 错误 之前thinkphp的系统部署在apache上,考虑到在并发性能nginx比apache强悍得多,所以在 ...
- ArcEngine中打开各种数据源（WorkSpace）的连接
(SDE.personal/File.ShapeFile.CAD数据.影像图.影像数据集) ArcEngine 可以接受多种数据源.在开发过程中我们使用了如下几种数据源 1.企业数据库(SDE) 企业 ...
- fiddler抓取Android 真机app数据包
fiddler功能强大 不仅能抓pc上的请求还能抓取手机上的请求.下面以fiddler4 +android手机为例介绍一下 手机抓包. 官网下载fiddler后下一步下一步安装成功. 首先是fiddl ...
- [转]Direct3D 11 Tessellation Tutorial
The new hardware tessellation feature available on Direct3D 11 video cards has great potential, but ...
- 浅析jquery ui的datepicker组件
今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...
- C# 委托和事件 与 观察者模式(发布-订阅模式)讲解 by天命
使用面向对象的思想 用c#控制台代码模拟猫抓老鼠 我们先来分析一下猫抓老鼠的过程 1.猫叫了 2.所有老鼠听到叫声,知道是哪只猫来了 3.老鼠们逃跑,边逃边喊:"xx猫来了,快跑啊!我是老鼠 ...
- Tomcat中间件URL中文字符传递问题
1. 问题描述: tomcat中如果URL中需要传递中文参数,需要配置tomcat的service.xml中文传递的编码方式,否则中文传递将出现乱码,导致程序异常. 2. 解决方式: 修改tomcat ...