無需Flash使用jQuery復(fù)制文字到剪貼板_jquery

Clipboard.js刪除了Flash組件并且優(yōu)雅地解決了這個(gè)問題，需要做的只是引入其腳本，在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用，在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中，當(dāng)點(diǎn)擊文本框時(shí)，會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。

下面是我的實(shí)現(xiàn)。

假如這是你的文本框。（我使用MVC框架創(chuàng)建我的應(yīng)用程序）

From
$
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
To$

你有沒有注意到我有一個(gè) AmountTo和 一個(gè)AmountFrom,AmountTo是輸入AmountFrom 是輸出 ，當(dāng)我們點(diǎn)擊這個(gè)的時(shí)候其值就會(huì)傳給剪切板。這個(gè)神奇的事情發(fā)生在屬性“data-clipboard-target”里面。

我們也添加一個(gè)消息框用來顯示拷貝動(dòng)作消息

到這里就是你所關(guān)心的HTML部分。現(xiàn)在讓我們?nèi)タ碕avaScript/jQuery 部分

至此，會(huì)發(fā)現(xiàn)我們只是引入了clipoard.js，如果實(shí)例化Clipboard成功，然后會(huì)給事件賦予一些動(dòng)作，否則它會(huì)觸發(fā)一個(gè)錯(cuò)誤，是這樣吧？這一切都很好，它能兼容所有最新的瀏覽器，除了IE，它會(huì)給出下面這樣的一個(gè)消息。

如果希望看一下實(shí)際的效果，這是一個(gè)JSFiddle示例。

接下來就是抓取剪貼板的數(shù)據(jù)然后當(dāng)點(diǎn)擊時(shí)自動(dòng)地粘貼到一個(gè)文本框，至此，看上去瀏覽器因?yàn)橐粋€(gè)安全上的風(fēng)險(xiǎn)會(huì)阻止它，但是我會(huì)嘗試找到甚至做出一個(gè)方案，因此大家還得繼續(xù)關(guān)注。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com