<!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. SQL Server 数据库的安全管理（登录、角色、权限）

    ---数据库的安全管理 --登录:SQL Server数据库服务器登录的身份验证模式:1)Windows身份验证.2)Windows和SQL Server混合验证 --角色:分类:1)服务器角色.服务 ...

  2. Jquery--弹窗

    <title>弹窗</title> <script src="JS/jquery-1.7.2.js"></script> <s ...

  3. Node.js 中MongoDB的基本接口操作

    Node.js 中MongoDB的基本接口操作 连接数据库 安装mongodb模块 导入mongodb模块 调用connect方法 文档的增删改查操作 插入文档 方法: db.collection(& ...

  4. JENKINS基础使用

    JENKINS总结 修改时间 修改内容 修改人 2016.3.12 创建 刘永志 2016.5.22 添加tomcat+jenkins 刘永志 2016.6.14 添加tomcat找不到ant解决方案 ...

  5. 因为此版本的应用程序不支持其项目类型(.csproj)”之解

    有的时候vs无缘无故的出现如下错误:"因为此版本的应用程序不支持其项目类型(.csproj),若要打开它,请使用支持此类型项目的版本" 解决办法:如果是这个提示,可能是由于你安装m ...

  6. 清空表数据 mysql让主键从1开始

    TRUNCATE TABLE name 删除表中的所有行,而不记录单个行删除操作.

  7. 广播后刷新界面-调用其他界面的方法触动广播后刷新该界面UI

    new CigaretteLoginActivity().login(ac,"switch_account",list.get(arg2).CUST_CODE,list.get(a ...

  8. tcp转发

    Proxy.java package com.dc.tcp.proxy; import java.io.IOException; import java.net.ServerSocket; impor ...

  9. 修改Arduino串口缓冲区大小（转）

    本帖节选自<Arduino程序设计基础>第二版5.1.6串口缓冲区       在之前的示例程序中,我们都是采用人工输入测试数据的方式检验程序效果,Arduino每接收到一次数据,就会将数 ...

  10. 【好文要转】HTTP图解（大牛必经之路）

    http://www.cnblogs.com/aylin/p/6221436.html