>

操作剪贴板,剪贴板插件clipboard

- 编辑:www.bifa688.com -

操作剪贴板,剪贴板插件clipboard

时间: 2019-03-26阅读: 604标签: 方法

  方今品种发急,同期也学到好些个在先并未有接触过的学识。oninput、onchange与onpropertychange事件的分别, 与input输入框实时检查评定

1.那个框架它不依靠于于Flash或任何blo肿的框架。

经过 js 能够操作剪贴板的复制剪切粘贴

  1. onchange事件只在键盘可能鼠标操作更换目的属性,value的值发生变化且失去大旨时接触,客商js退换value时无法触及;

  2. onkeydown/onkeypress/onkeyup键盘事件来监测以来,监听不了右键的复制、剪贴和粘贴那一个操作。

  3. oninput是正规浏览器的事件,对于检查评定 textarea, input:text,input:password 和 input:search 那多少个元素通过顾客分界面产生的源委改造非常常有用,在内容改动后立时被触发,不像 onchange 事件须要失去主题才触发,不过透过js修改value时,却不会触发。

  4. onpropertychange 是 IE 特有的风云。

2.安装。

您能够在npm找到它。

npm install clipboard --save

或者

bower install clipboard --save

然后下载脚文件。下载网址:

用到的办法和因素

  oninput与onpropertychange失效的状态:

3.建立

第生龙活虎,包蕴dist文件夹中的脚本或从其三方CDN提供程序加载脚本。

<script      src="dist/clipboard.min.js"></script>

最近,您需求通过传递DOM选择器,HTML元素或HTML成分列表来实例化它。

newClipboard('.btn');

在其间,大家必要得到与选择器相配的装有因素,并为每种成分附加事件侦听器。但猜猜是何等?即令你有数百场比赛,这么些操作能够消耗大批量的内部存款和储蓄器。

据此,我们运用事件委托,只用一个监听器替换多个事件侦听器。终归,#perfmatters。

DOM元素

  (1)oninput事件:a卡塔尔国. 当脚本中改造value时,不会接触;b卡塔尔.从浏览器的全自动下拉提示中甄选时,不会触发。

4.用法。

利用HTML5数量属性来博取更加好的可用性。

textarea /textareainput/

  (2)onpropertychange事件:当input设置为disable=true后,onpropertychange不会触发。

从另多个因素复制文本:

叁个很宽泛的用例是从另三个因素复制内容。您能够因此data-clipboard-target在触发器成分中增添贰天性质来达成。

你在那属性上带有的值必要相配另三个要素采用器。

<input  id="foo"   value=";

<button   class="btn"     data-clipboard-target="#foo">

      <img    src="assets/clippy.svg"     alt="Copy to clipboard">

</button>

js 方法

  (3)oninput 和 onpropertychange 这五个事件在 IE9 中都有个小BUG,那正是透过右键菜单菜单中的剪切和删除命令删除内容的时候不会接触,而 IE 其余版本都以正规的,近期还并未有很好的消除方案。

从另叁个要素剪切文本:

别的,您能够定义一个data-clipboard-action属性,以内定是要如故copy依旧要cut内容。

意气风发旦省略此属性,copy暗许意况下将被运用。

<textarea  id="bar">Mussum ipsum cacilds...</textarea>

<buttonclass="btn"   data-clipboard-action="cut"    data-clipboard-target="#bar">

                Cut to clipboard

</button>

正如您所期望的,该cut操作只适用于<input>或<textarea>成分。

// 选中输入框中的所有文本inputElement.select()// 选中输入框中的部分文本inputElement.setSelectionRange(start, end)// 对选中的文本进行 复制 / 剪切 / 粘贴 操作document.execCommand('copy/cut/paste')

  

从属性复制文本:

精气神儿是,你居然无需另贰个要一贯复制它的剧情。您可以data-clipboard-text在触发器成分中蕴涵叁特性质。

<button    class="btn"    data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">

                Copy to clipboard

</button>

兑现原理

5.活动

在一些景况下,您愿意展现一些顾客反映或捕获在复制/剪切操作后选取的剧情。

那正是怎么大家触发自定义事件,举例success和error你倾听并达成自定义的逻辑。

var   clipboard =newClipboard('.btn');

clipboard.on('success',function(e){

console.info('Action:', e.action);

console.info('Text:', e.text);

console.info('Trigger:', e.trigger);

e.clearSelection();

});

clipboard.on('error',function(e){

console.error('Action:', e.action);

console.error('Trigger:', e.trigger);

必发88官网,});

是通过 js 操作 textarea input 输入框,只好操作输入框,不能够操作其余成分。全体的 复制/剪切/粘贴 都以要在当选输入框中的公文之后,才开展操作的。

6.高端用法

借使您不想修正你的HTML,那么你能够接纳叁个相当有接济的命令API。全部你需求做的是声称三个函数,做你的作业,并回到三个值。

诸如,假如要动态设置三个target,则要求重临三个节点。

new  Clipboard('.btn', {

     target:function(trigger){

                return    trigger.nextElementSibling;

   }

});

生机勃勃经您想动态地设置二个text,你将赶回一个String。

newClipboard('.btn', {

         text:function(trigger){

              returntrigger.getAttribute('aria-label');

            }

});

除此以外,假设你使用单页面应用程序,则或然需求校正确地管理DOM的生命周期。以下是清理大家创造的事件和目标的不二等秘书技。

var   clipboard =new   Clipboard('.btn');

clipboard.destroy();

切实事例

写个例子体现一下

HTML

label for="text"测试内容:/labeltextarea name="text" cols="30" rows="1"ABCDEFGHIJKLMNOPQRSTUVWXYZ/textareatextarea name="text" cols="30" rows="2" placeholder=""/textarea

js 就径直在 console 中打开调节和测量试验了用 shift enter 在 console 中换行输入指令

JS

// 选中文本var text = document.querySelector('#text');text.focus();text.setSelectionRange(3,13);// 操作文本document.execCommand('cut')

本文由必发88官网发布,转载请注明来源:操作剪贴板,剪贴板插件clipboard