精华内容
下载资源
问答
  • 优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。...

    [导读] 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法


    文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法–ZeroClipboard可用于任何浏览器。

    一、常规方法
      but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器。
    具体使用及代码可见D

    注:该脚本对非IE内核的浏览器无效。想要兼容全浏览器,可以采用插件+FLASH控件的办法,具体可点击 兼容各浏览器的点击复制文本框内容的Jquery插件

    使用方法如下:

    引入Jquery后,执行如下函数代码:

    $(function(){
      $("#d_clip_button").click(function(){
        var Url=$("#yao_txt").text();
        copyToClipboard(Url);
     });
    });

    其中copyToClipboard的函数如下:

    function copyToClipboard(maintext){
      if (window.clipboardData){
        window.clipboardData.setData("Text", maintext);
        }else if (window.netscape){
          try{
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        }catch(e){
            alert("该浏览器不支持一键复制!n请手工复制文本框链接地址~");
        }
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;
        trans.addDataFlavor('text/unicode');
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext=maintext;
        str.data=copytext;
        trans.setTransferData("text/unicode",str,copytext.length*2);
        var clipid=Components.interfaces.nsIClipboard;
        if (!clip) return false;
        clip.setData(trans,null,clipid.kGlobalClipboard);
      }
      alert("以下内容已经复制到剪贴板nn" + maintext);
    }

    二、插件+FLASH控件的方法–ZeroClipboard
      对于使用非IE内核的用户来说,当然不死心,希望能找到一个全面兼容的方式,在一个网站一扒,就把这个插件ZeroClipboard给扒下来了,该插件能支持所有的浏览器,但是缺点也明显,首先要基于Jquery库,插件的个头也有10K,当然压缩后可以小一些,另外有一个FLASH控件,有可能在没装FLASH播放器的机器上控件不可用(但没装FLASH播放器的用户基本很少)

    点击此处下载该插件: http://pan.baidu.com/s/1pKxnip9
    注:因为采用FLASH控件的文件实现兼容,所以本页面中请在服务器上浏览才能获得看到效果。

    优点:兼容各浏览器
    缺点:插件有10K大小,还需要引入一个Jqueyr的库。
    如果不需要全浏览器的兼容,可以使用 常规复制文本框内容的脚本

    引入Jquery后再引入插件ZeroClipboard,同时下载 FLASH控件 和JS文件放同一目录 ,在页面中添加执行的脚本。完整代码如下:

    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script type="text/javascript">
    $(function(){
      var clip = new ZeroClipboard.Client();
      clip.setHandCursor( true );
      clip.setCSSEffects( true );
      clip.addEventListener( 'mouseDown', function(client){
        clip.setText( $('#yao_txt').val() );
      });
      clip.addEventListener( 'complete', function(){alert('复制成功');});
      clip.glue( 'd_clip_button' );
    });
    </script>


    展开全文
  • 实现点击按钮复制文本框中文本到剪切板中的方法

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                         

    主要代码:

    <textarea name="text" id="text" cols="30" rows="10"></textarea><button onclick="myCopy()">点击复制文本框内的内容</button><br><script>    function myCopy(){        var ele = document.getElementById("text");        ele.select();        document.execCommand("Copy");    }</script>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    效果图:
    这里写图片描述

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    展开全文
  • 复制文本框内容的方法如下: function Copy(){ var e=document.getElementById("content");//对象是content if (e.value != "") { e.select();//选择对象 document.execCommand("Copy");//执行浏览器复制命令 ...

    点击按钮复制文本框内容

    复制文本框内容的方法如下:

    function Copy(){
    	var e=document.getElementById("content");//对象是content
    	if (e.value != "") {
    		e.select();//选择对象
    		document.execCommand("Copy");//执行浏览器复制命令
    		alert("复制成功!");
    	}else{
    		alert("文本框不能为空!");
    	}
    }
    

    该对象只能是文本框,例如:< textarea id=“content”></ textarea>< input id=“content” />
    文本框中必须有内容,没有内容也就没有复制的对象。
    文本框不能隐藏,例如:type=“hidden”style=“display: none”;就不能实现复制。

    Html网页代码如下:

    <body>
    	<textarea id="content">今天你要嫁给我</textarea>
    	<input type="button" value="复制" onclick="Copy()">
    </body>
    

    想要复制的内容不是文本框中的也可以,如下图并没有看到文本框,在该页面点击复制按钮可以复制发送内容。
    在这里插入图片描述

    该页面有文本框并且没有隐藏,如果隐藏文本框就不能实现复制功能了。其实可以使用z-index来进行覆盖从而达到“隐藏”效果,如下:

    <div>发送内容</div>
    <input id="content" style="float:left;z-index:-1;position:absolute;">
    <div style="background-color:#ddd"  id="divAlready">
    	<span>【雷雷商贸有限公司电子对账单】尊敬的客户:到目前为止您累计欠款为¥990000.00,请您核实。详细请点击网页链接:</span>
    	<a target="_blank" href="https://zhsmjxc.com/">
    	<span id="url">https://zhsmjxc.com/</span>
    	</a>
    	<span>。</span>
    </div>
    

    “隐藏”了文本框之后,复制方法只需给文本框的value赋值为发送内容即可。如下:

    <!-- jquery插件 -->
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <!-- layer提示框插件 -->
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript">
    	function Copy(){
    		var a = $("#divAlready").find("span").text();  
    		$("#content").val(a);
    		var e = document.getElementById("content");//对象是content 
    		e.select();//选择对象
    		document.execCommand("Copy");//执行浏览器复制命令
    		layer.alert("复制成功", { icon: 1 });
    	}
    </script>
    
    展开全文
  • js实现复制文本框内容

    千次阅读 2016-06-29 23:50:12
    js实现复制文本框内容 //复制的方法 function copy(){ //获得第一个文本框的值 var x=document.getElementById("one").value; //把第一个文本框的值赋值给第二个文本框 document.getElementById("two")....
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js实现复制文本框内容</title>
    <script type="text/javascript">
    //复制的方法
    function copy(){
    //获得第一个文本框的值
    var x=document.getElementById("one").value;

    //把第一个文本框的值赋值给第二个文本框
    document.getElementById("two").value=x;

    //清空第一个文本框
    document.getElementById("one").value="";
    }
    </script>
    </head>


    <body>
    <input type="text" id="one"/>
    <input type="text" id="two"/>
    <input type="button" value="复制" οnclick="copy()" />
    </body>
    </html>
    展开全文
  • 想要效果是,点击复制链接按钮,然后就把事先准备好链接复制上...// 复制链接方法 copyUrl() { let inputText = document.getElementById('inputText'); let currentFocus = document.activeElement; input...
  • 第一种方法: <script type="text/javascript"> function CopyRegisterPath() { var btn = document.getElementById("<%=txtRegisterPath.ClientID%>"); clipboardData.setData('...
  • 主要代码: &lt;textarea name="text" id="text" cols="30" rows="10"...点击复制文本框内内容&lt;/button&gt;&lt;br&gt; &lt;scri
  • 1.npm进行安装 npm install clipboard --save 2.在需要使用组件中import ...3.添加需要复制的内容 <button class="tag-read" data-clipboard-text="我是可以复制的内容,请点击复制" @c...
  • 最近使用Vue开发Line(日韩一款类似中国微信...不带input输入框原生js方法这种情况适用于复制非输入框中文本到剪切板被复制的内容点击复制(function(){button.addEventListener('click', function(){var copyDo...
  • 主要介绍了VB实现屏蔽文本框右键菜单的复制、粘贴等功能,是非常实用一个功能,需要朋友可以参考下
  • 比如,下面一个文本框 复制代码代码如下:<input type=”text” id=”clock” /> 复制代码代码如下:<style type=”text/css”> input {width:300px;}</style> 这样写您看明白了没?很简单吧,...
  • 主要介绍了jQuery简单实现点击文本框复制内容到剪贴板上的方法,涉及jQuery针对浏览器的判定与剪贴板的读写操作技巧,需要的朋友可以参考下
  • 最近遇到一个需求,需要点击按钮,复制 标签中文本到...可以复制选中内容document.execCommand("copy")如果是输入框,可以通过 select()方法,选中输入框文本,然后调用 copy 命令,将文本复制到剪切板但是...
  • 下面表格列出了 clipboardData 对象...clipboardData 对象 方法 方法 描述 clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。 getData 通过 dataTransfer 或 clipboar...
  • 这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容...
  • 之前遇到导入都是要上传一个word或excel来导入,比较慢有时候还有浏览器限制,后来在想能不能通过将要导入内容复制到网页上一个文本框里面进行导入,实验过后发现挺方便挺快 页面:左上角做了一个导入数据...
  • 本文实例讲述了Yii把CGridView文本框换成下拉框的方法。分享给大家供大家参考。具体实现方法如下: 使用yii的朋友都知道Yii中的CGridView默认显示提文本框了,那么我们要怎么把它转换成下拉框呢?本文就此分析一下...
  • 文本框控件的要想熟练使用并不止了解一些简单的Text、Multiline、WordWrap等属性就完了,文本框控件有一些便捷操作的方法我们也需要掌握,下面是本人记录的: Clear()方法:清除文本框内容。 Copy()方法:将文本框...
  • 使input文本框不可编辑3种方法

    万次阅读 多人点赞 2017-11-20 13:03:42
    今天试了一下使input文本框不可编辑3种方法,现在总结一下: disabled 属性规定应该禁用 input 元素,被禁用 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字...
  • 设置input文本框不可编辑的方法disabled 属性readonly 属性 disabled 属性 disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后...
  • XML/HTML Code复制内容到剪贴板 <input id="username" name="username" type=...以上就是小编为大家带来h5输入框提示语 + 正常文本框提示语实现方法的全部内容了,希望对大家有所帮助,多多支持软件开发网~
  • 希望达到效果: 方法一:鼠标点击文本框时文字消失 复制代码代码如下: <input id=”login_name” type=”text” onblur=”[removed]check_login_name();” onfocus=”if(this.value==’支持英文及数字组合’) ...
  • 如果你发现,你的Firefox不能复制网站上的富文本到文本框里面,解决的方法很容易,   首先进去这个目录:C:\Documents and Settings\&lt;Windows login&gt;\Application Data\Mozilla\Firefox\Profiles\...
  • 有两种方法可以达到类似效果: disabled :属性规定禁用 input 元素,不可编辑,不可复制,不可选择,不能接收焦点, 后台也不会接收到传值。设置后文字颜色会变成灰色。disabled 属性无法与&lt;input ...
  • 复制代码代码如下: <style type=”text/css”> .in_search { border:1 none; color:#999999; float:left; font-size:14px; height:18px; line-height:18px; margin:3px 2px; width:253px; } </style> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 802
精华内容 320
关键字:

复制文本框的方法