document.activeElement属性为HTML 5中新增的document对象的一个属性,该属性用于返回光标所在元素。当光标未落在页面中任何元素内时,属性值返回body元素。

setSelectionRange(start, end) 设置选中文本起始位置与结束位置

execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令

    点击按钮复制textarea文本框中内容

<script type="text/javascript">
function copyTextAreaCt()
{
var oContent=document.getElementById("content");
oContent.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制完毕,可粘贴");
}
</script>
<textarea cols="20" rows="10" id="content" value="">This is a paragraph......</textarea>
<input type="button" onClick="copyTextAreaCt()" value="点击复制代码" />

    转 通过按钮直接把input或者textarea里的值复制到粘贴板里

function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart; //selectionStart光标的开始位置
origSelectionEnd = elem.selectionEnd; //selectionEnd 光标的结束位置
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;//获取当前页面活动的元素
target.focus();
target.setSelectionRange(0, target.value.length); // copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
} if (isInput) {
// restore prior selection 恢复之前的选择
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
} //直接调用这个方法:
copyToClipboard(document.getElementById("name"));

文章转自  http://blog.csdn.net/qq377751971/article/details/65446247

http://www.cnblogs.com/tylerdonet/p/4533782.html

http://showlike.iteye.com/blog/1073642

转JS--通过按钮直接把input或者textarea里的值复制到粘贴板里的更多相关文章

  1. js 实现复制到粘贴板功能

    前言:js 或者 jquery 都可以实现的复制到粘贴板功能,有时还想要有换行等格式(同 textarea) 网站地址:我的个人vue+element ui demo网站 github地址:yuleG ...

  2. 使用clipboard插件实现div、textarea、input里面的内容复制到粘贴板

    一.引用clipboard的js文件 二.编写代码.data-clipboard-action=“copy”,代表要执行的动作是复制.data-clipboard-target里面要是要选择复制的元素 ...

  3. js复制到粘贴板

    http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...

  4. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  5. valuechange(动态的监听input,textarea)

    valuechange(动态的监听input,textarea)之前值,之后值的变化 jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 ...

  6. jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...

  7. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  8. 点击按钮文字变成input框,点击保存变成文字

    <!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...

  9. input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.

    1.使用disabled input , button  textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button       : 下面的 onclick ...

随机推荐

  1. 使用NPOI读取Excel数据到DataTable

    如今XML文件的存储格式大行其道,可是也不是适用于全部情况,非常多单位的数据交换还是使用Excel的形式.这就使得我们须要读取Excel内的数据.载入到程序中进行处理.可是如何有效率的读取,如何使程序 ...

  2. CCFlow最近在山东济南总部举行组团培训活动,有參加的能够报名

    最近.CCFlow将会组织培训,由总设计师--周朋先生亲自授课. 行程                        培训内容 第一天                     ccflow的概述功能简 ...

  3. PAT 1004 To Fill or Not to Fill (25)

    题目描写叙述 With highways available, driving a car from Hangzhou to any other city is easy. But since the ...

  4. JavaScript获取浏览器版本等信息

    ** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...

  5. MPSOC之1——overview、开发板、工具

    1.MPSOC overview MPSOC是xilinx公司推出的新一代集成SOC,比ZYNQ厉害了一个等级. 熟悉一个芯片,不能一头扎进详细的数据手册,应该从overview开始大概了解,然后浏览 ...

  6. IDEA使用--字体、编码和基本设置

    IDEA这么高端的工具之前只是断断续续使用了一下,因为项目的开发都是在eclipse上,每次学习IDEA的使用都得上网搜索半天,今天自己整理一下,方便以后查阅. IDEA版本15.0.4 字体 界面字 ...

  7. 【java】Vector

    package com.tn.collect; import java.util.Enumeration; import java.util.Iterator; import java.util.Ve ...

  8. Python云端系统开发入门——框架基础

    Django框架基础 这是我学习北京理工大学嵩天老师的<Python云端系统开发入门>课程的笔记,在此我特别感谢老师的精彩讲解和对我的引导. 1.Django简介与安装 Django是一个 ...

  9. OC学习11——循环引用与@class

    转载自 OC学习篇之---@class关键字的作用以及#include和#import的区别 一.#import和#include的区别 当我们在代码中使用两次#include的时候会报错:因为#in ...

  10. 【bzoj3809】Gty的二逼妹子序列

    Description Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题. 对于一段妹子们,他们想让你帮忙求出这之内美丽度∈[a,b]的妹子的美丽度的种类数. 为了方便,我们 ...