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. 行编辑距离Edit Distance——动态规划

    题目描写叙述: 给定一个源串和目标串.可以对源串进行例如以下操作:  1. 在给定位置上插入一个字符  2. 替换随意字符  3. 删除随意字符 写一个程序.返回最小操作数,使得对源串进行这些操作后等 ...

  2. C语言之基本算法37—数组最大值及其位置

    //数组运算 /* ================================================================== 题目:查找数组的最大元素,并输出其位置和值! ...

  3. Android之使用MediaMetadataRetriever类获取媒体信息

    一.昨天.介绍了使用MediaMetadataRetriever类来获取视频第一帧:http://blog.csdn.net/u012561176/article/details/47858099,今 ...

  4. 【转载】Java系列笔记(1) - Java 类加载与初始化

    Java系列笔记(1) - Java 类加载与初始化 原文地址:http://www.cnblogs.com/zhguang/p/3154584.html 目录 类加载器 动态加载 链接 初始化 示例 ...

  5. 自学Python1.1-简介

    1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 2.1  编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语 ...

  6. Shell编程中的变量作用域

    有两个shell脚本文件: a.sh name=Tom echo $name ./b.sh b.sh echo "name in b.sh:"$name 运行./a.sh时输出结果 ...

  7. Java Restful Web Service 学习指南

    Restful是一种架构style,目前常说的有restful web service, resultful http.现在热搜榜的微服务,大多数会采用Restful方式. JAX-RS 作为一个Re ...

  8. IDEA热部署(三)---jetty插件调试(转)

    我们在开发的时候习惯对于项目的框架进行分层,在idea中对于不同的层,我们使用module来进行划分,不同的module之间是通过maven来进行依赖的. 我们的项目结构是这样的,admin是我们的w ...

  9. Intellij 如何在新窗口中打开项目

    好多程序员都使用intelliJ idea开发项目,由于不小心设置了不在提示打开项目项目方式,所以只能打开一个窗口,而且只能同时打开一个项目,特别郁闷,分享下设置后的效果 工具/原料   Intell ...

  10. spring boot自定义starter

    1.spring boot 项目中自定义jar包 2.项目目录 3.src/main/java 下面写自己的方法,重点是 resources 下面的文件,在resources下面新建文件夹名字为 ME ...