<!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">&nbsp;</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打造的类似新浪微博@提醒功能的更多相关文章

  1. jquery实现百度类似搜索提示功能（AJAX应用）

    有时候觉得百度那个输入内容就有提示的工具很神奇,它究竟是怎么做到的呢?以前在一个进销存系统中也做过这么个功能,但是远远不及百度的功能强大,百度可以输入首字母,关键字拼音,或关键字都可以匹配,有时在想, ...

  2. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  3. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  4. 改进iOS客户端的升级提醒功能

    改进iOS客户端的升级提醒功能 功能设计 先申明一下,我是码农,不是一个产品经理,但我觉得现有市面上的很多 App,设计的 "升级提示功能" 都不太友好.在此分享一下我的想法,欢迎 ...

  5. 12、ABPZero系列教程之拼多多卖家工具 拼团提醒功能登录拼多多实现

    上篇文章已经完成了整个拼多多拼团提醒功能,本篇继续完成拼多多帐号登录,拼多多帐号登录的目的是为了获取拼团商品的SKU和订单号,便于商家备货. 以下是拼多多官方的后台登录,要实现的功能并不是直接在这里登 ...

  6. iOS开发中UILocalNotification本地通知实现简单的提醒功能

    这段时间项目要求做一个类似的闹钟提醒功能,对通知不太熟悉的我,决定先用到xcode自带的本地通知试试,最终成功的实现了功能,特整理分享下. 它的表现特点: app关闭的时候也能接收和显示通知. app ...

  7. jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  8. jquery each函数 break和continue功能

    jquery each函数 break和continue功能幸运的是另一个突破,持续一个jQuery循环方式.你可以打破在函数返回一个jQuery参数虚假循环.一个可以继续执行只是在做不指定返回值或返 ...

  9. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 网络订单提醒功能，网点区域功能增强

    客户端会提醒是否有网络订单来了,这样及时处理网络上的用户下单,当然也会有手机短信系统,全国几千个网点就可以协同作战了,竟然有序的处理海量用户的下单.网络订单提醒功能增强效果如下: 系统每5分钟会检查一 ...

随机推荐

  1. Socket为什么要翻译成套接字

    作者:陈振玥链接:https://www.zhihu.com/question/21383903/answer/64103663来源:知乎著作权归作者所有,转载请联系作者获得授权. 作为一条刻(wu) ...

  2. LinQ的组合+分页

    前台代码: 名称:<asp:TextBox ID="Textname" runat="server"></asp:TextBox> 油耗 ...

  3. SQL中判断一串字符中是否有特定的字符

    ),) SET @s='1,2,3,4,5,6,7,8,9,10' 一:SET @sql='select col='''+ replace(@s,',',''' union all select '' ...

  4. C6713的Boot mode

    2014年7月23日,终于把困扰我两个月的问题解决了,甚是嗨皮,所以做下记录,以供后人参考之用. 问题描述:我用的片子是TMS320C6713,通过EMIF总线连接的FLASH,此FLASH分为两部分 ...

  5. .NET core mvc on Docker

    安装Docker 参考:http://www.cnblogs.com/windchen/p/6224233.html 下载.NET CORE MVC镜像 sudo docker pull regist ...

  6. 通过Dockerfile建立.NET Core mvc Image

    生成.NET core mvc code docker run -itd microsoft/dotnet:latestdocker psdocker attach containeridmkdir ...

  7. Nginx的nginx.conf配置文件中文注释说明

    #运行用户    user www-data;        #启动进程,通常设置成和cpu的数量相等    worker_processes  1;    #全局错误日志及PID文件    erro ...

  8. 使用FreePic2Pdf导出书签至Word建立层级目录——快速初始化Word笔记本目录

    使用FreePic2Pdf导出书签至Word建立层级目录 --快速初始化Word笔记本目录 文:安徽师范大学2014级计算机科学与技术 王昊 (Get Contact:441301158@qq.com ...

  9. matlab struct结构体用法

    结构体的赋值: 结构体的赋值,这里不建议用下面这种形式进行统一赋值, s = sturct('field1',values1,'field2',values2,-) 而是建议直接赋值,就是对每一个属性 ...

  10. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...