• 选中/复制文字


    获取手动选择的文字:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <textarea id="content" cols="30" rows="10">my name is yangkang!</textarea>
        <button id="btn">获取选中的文字</button>
        <div id="show"></div>
        <script>
        function selectText(id) {
            var oBox = document.getElementById(id);
            if(window.getSelection){
                if(oBox.selectionStart != undefined && oBox.selectionEnd != undefined){
                    return oBox.value.substring(oBox.selectionStart,oBox.selectionEnd);
                }
                else{
                    return "";
                }
            }
            else{
                return document.selection.createRange().text;
            }
        }
        document.getElementById('btn').onclick = function () {
            document.getElementById('show').innerHTML = selectText('content');
        }
        </script>
    </body>
    </html>

    自动选中文字:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myTxt">my name is yangk!</div>
        <script>
        function selectText(element) {
            var text = document.getElementById(element);
            if(document.body.createTextRange){
                var range = document.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            }
            else if(window.getSelection){
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(text);
                selection.removeAllRanges();
                selection.addRange(range);
                /*if(selection.setBaseAndExtent){
                    selection.setBaseAndExtent(text, 0, text, 1);
                }*/
            }
            else{
                alert("none");
            }
        }
        selectText("myTxt");
        </script>
    </body>
    </html>

    zclip插件(服务器环境下使用):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery-1.11.1.js"></script>
        <script src="jquery.zclip.min.js"></script>
        <script>
        $(function(){ 
            $('#copyBtn').zclip({ 
                path: 'ZeroClipboard.swf', 
                copy: function(){//复制内容
                    return $('#myTxt').val();
                    //return $('#myTxt').text();//如果是div等非能输入元素
                }, 
                afterCopy: function(){//复制成功
                    $("<span id='msg'/>").insertAfter($('#copyBtn')).text('复制成功'); 
                } 
            }); 
        }); 
        </script>
    </head>
    <body>
        <textarea id="myTxt">请输入内容</textarea><br/> 
        <a href="javascript:;" id="copyBtn">复制内容</a>
    </body>
    </html>

    execCommand

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>点击复制后在右边textarea CTRL+V看一下</p>
        <!-- 输入框 -->
        <input type="text" id="inputText" value="测试文本"/>
        <!-- 按钮 -->
        <input type="button" id="btn" value="复制"/>
    
        <textarea rows="4"></textarea>
        <script type="text/javascript">
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function(){
                var inputText = document.getElementById('inputText');
    
                // currentFocus 是复制按钮
                var currentFocus = document.activeElement;
    
                // 全选
                inputText.focus();
                inputText.setSelectionRange(0, inputText.value.length);
    
                // 复制
                document.execCommand('copy', true);
    
                // 把光标从 inputText 中移出
                currentFocus.focus();
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    Windows下做7层软负载方案分析
    蛙蛙推荐:C语言入门之二——编写第一个有意义的小程序
    蛙蛙推荐:C语言入门之一——Linux下的C开发环境搭建小节
    蛙蛙推荐:动手做个网页游戏五子棋
    学习园地:微博项目
    com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field 异常 规格严格
    PostgreSQL Update 根据B表更新A表 规格严格
    SQL 删除重复数据[转] 规格严格
    ntoskrnl.exe占用cpu高 规格严格
    PostgreSQL中RECURSIVE递归查询使用总结[转] 规格严格
  • 原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/5950255.html
Copyright © 2020-2023  润新知