文本选中事件

文本选中触发的事件


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>title>
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">script>
        <style type="text/css">
            .tooltip {
                width:219px;
                height:33px;
            }
            .tooltip a {
                width:219px;
                height:33px;
                display:block;
            }
        style>
        <script type="text/javascript">
            // 获取选中的文本
            function getSelectText() {
                var txt = "";
                if(document.selection) {
                    txt = document.selection.createRange().text;
                } else {
                    txt = document.getSelection();
                    //txt = window.getSelection();
                }
                return $.trim(txt.toString());
            }
            function getPosition(e) {
                var x = 15;
                var y = 15;
                var r = getSelectText();
                if(r) {
                    var bowen = r.toString();
                    var tooltip = "";
                    $("body").append(tooltip);
                    $("#tooltip").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px",
                        "position": "absolute"
                    }).show("fast");
                }
            }
            $(function() {
                //将该id下的文章,鼠标选中松开后弹窗
                $("#selectedArticle").mouseup(function(e) {
                    var txt = getSelectText();
                    txt = $.trim(txt);
                    getPosition(e);
                }).mousedown(function() {
                    $("#tooltip").remove();
                });
            });
        script>
    head>
    <body>
        
        <div >
<textarea cols="60" rows="8"id="selectedArticle">
asp、php、asp.net、javascript、jquery、vbscript、dos
textarea>
        div>
        asp、php、asp.net、javascript、jquery、vbscript、dos
    body>
html>

效果图:

文本选中事件_第1张图片

你可能感兴趣的:(js)