成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

如果在網上找一個關于如何將一段特定的文本拷貝到剪貼板的解決方案，最可能的結果就是使用Flash的方案來做這個事，雖然使用Flash可以很好地解決這個問題，但是這不是一個明智的想法，因為這個產品最終會消失或者至少是瀏覽器不再提供支持，因此這個解決方案是沒有未來的。雖然可以使用jQuery或者純JavaScript，甚至完全自己寫，但是當有人已經創建了一個解決方案，那么為什么還要重復發明輪子呢？讓我們一起看看Clipboard.js吧。

Clipboard.js刪除了Flash組件并且優雅地解決了這個問題，需要做的只是引入其腳本，在HTML標簽上賦一個“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個貨幣轉換應用，在一個文本框中輸入數值時同時將兌換結果顯示在另一個文本框中，當點擊文本框時，會觸發事件將其復制到剪貼板然后顯示一條消息。

下面是我的實現。

假如這是你的文本框。（我使用MVC框架創建我的應用程序）

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

你有沒有注意到我有一個 AmountTo和 一個AmountFrom,AmountTo是輸入AmountFrom 是輸出 ，當我們點擊這個的時候其值就會傳給剪切板。這個神奇的事情發生在屬性“data-clipboard-target”里面。

我們也添加一個消息框用來顯示拷貝動作消息

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

到這里就是你所關心的HTML部分。現在讓我們去看JavaScript/jQuery 部分

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard('#AmountTo');
clipboard.on('success',function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on('error',function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$('#AmountFrom').click(function(){$("#AmountFrom").val("");});
</script>

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

如果希望看一下實際的效果，這是一個JSFiddle示例。

接下來就是抓取剪貼板的數據然后當點擊時自動地粘貼到一個文本框，至此，看上去瀏覽器因為一個安全上的風險會阻止它，但是我會嘗試找到甚至做出一個方案，因此大家還得繼續關注。