Trelloのカードにカーソルを合わせてCtrl+を押すとC、このカードの URL がクリップボードにコピーされます。彼らはどのようにこれを行うのですか？
私が知る限り、関連する Flash ムービーはありません。Flashblockをインストールしましたが、Firefox のネットワーク タブに Flash ムービーがロードされていません。(ZeroClipboard などによる通常の方法です。)
彼らはどのようにしてこの魔法を達成するのですか?
(現時点でひらめきがあったと思います: ページ上のテキストを選択することはできません。そのため、JavaScript コードを介してテキスト選択を作成する非表示の要素があり、Ctrl+Cがブラウザーのデフォルトの動作をトリガーし、非表示の要素をコピーしていると思います。ノードのテキスト値。)
開示： Trelloが使用するコードを書きました。以下のコードは、クリップボードのトリックを実行するために Trello が使用する実際のソース コードです。
Ctrl実際には「ユーザーのクリップボードにアクセス」するのではなく、ユーザーが+を押したときに役立つものを選択することで、ユーザーを少し助けますC。
あなたはそれを理解したように聞こえます。Ctrl+を押したいときは、最初にキーを押さCなければならないという事実を利用しています。キーが押されると、クリップボードに入れたいテキストを含むテキストエリアにポップし、その中のすべてのテキストを選択するので、キーが押されたときに選択がすべて設定されCtrlます。(次に、キーが表示されたときにテキストエリアを非表示にします。)CtrlCCtrl
具体的には、Trello は次のことを行います。
TrelloClipboard = new class
constructor: ->
@value = ""
$(document).keydown (e) =>
# Only do this if there's something to be put on the clipboard, and it
# looks like they're starting a copy shortcut
if !@value || !(e.ctrlKey || e.metaKey)
return
if $(e.target).is("input:visible,textarea:visible")
return
# Abort if it looks like they've selected some text (maybe they're trying
# to copy out a bit of the description or something)
if window.getSelection?()?.toString()
return
if document.selection?.createRange().text
return
_.defer =>
$clipboardContainer = $("#clipboard-container")
$clipboardContainer.empty().show()
$("<textarea id='clipboard'></textarea>")
.val(@value)
.appendTo($clipboardContainer)
.focus()
.select()
$(document).keyup (e) ->
if $(e.target).is("#clipboard")
$("#clipboard-container").empty().hide()
set: (@value) ->
DOM には次のものがあります。
<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
クリップボード用の CSS:
#clipboard-container {
position: fixed;
left: 0px;
top: 0px;
width: 0px;
height: 0px;
z-index: 100;
display: none;
opacity: 0;
}
#clipboard {
width: 1px;
height: 1px;
padding: 0px;
}
...そしてCSSはそれを作成するので、テキストエリアが表示されたときに実際には表示されません...しかし、コピーするのに十分な「表示」があります。
カードにカーソルを合わせると、
TrelloClipboard.set(cardUrl)
Ctrl...そのため、クリップボードヘルパーは、キーが押されたときに何を選択するかを知っています。
私は実際に、すべての Web ページに対して、まさにこれを行う Chrome 拡張機能を作成しました。ソースコードはGitHub にあります。
私は Trello のアプローチで 3 つのバグを見つけました。
次のシナリオでは、コピーは機能しません。
ユーザーがヒットしたときにスパンを作成するのではなく、常に非表示のスパンを持つことで＃1を解決しましたCtrl/ Cmd。
長さゼロの選択を一時的にクリアし、キャレット位置を保存し、コピーを実行してキャレット位置を復元することで、＃2を解決しました。
#3 の修正はまだ見つかっていません :) (詳細については、私の GitHub プロジェクトで未解決の問題を確認してください)。
GitHubのレインコートのコードの助けを借りて、プレーンな JavaScript でクリップボードにアクセスする実行中のバージョンを取得することができました。
function TrelloClipboard() {
var me = this;
var utils = {
nodeName: function (node, name) {
return !!(node.nodeName.toLowerCase() === name)
}
}
var textareaId = 'simulate-trello-clipboard',
containerId = textareaId + '-container',
container, textarea
var createTextarea = function () {
container = document.querySelector('#' + containerId)
if (!container) {
container = document.createElement('div')
container.id = containerId
container.setAttribute('style', [, 'position: fixed;', 'left: 0px;', 'top: 0px;', 'width: 0px;', 'height: 0px;', 'z-index: 100;', 'opacity: 0;'].join(''))
document.body.appendChild(container)
}
container.style.display = 'block'
textarea = document.createElement('textarea')
textarea.setAttribute('style', [, 'width: 1px;', 'height: 1px;', 'padding: 0px;'].join(''))
textarea.id = textareaId
container.innerHTML = ''
container.appendChild(textarea)
textarea.appendChild(document.createTextNode(me.value))
textarea.focus()
textarea.select()
}
var keyDownMonitor = function (e) {
var code = e.keyCode || e.which;
if (!(e.ctrlKey || e.metaKey)) {
return
}
var target = e.target
if (utils.nodeName(target, 'textarea') || utils.nodeName(target, 'input')) {
return
}
if (window.getSelection && window.getSelection() && window.getSelection().toString()) {
return
}
if (document.selection && document.selection.createRange().text) {
return
}
setTimeout(createTextarea, 0)
}
var keyUpMonitor = function (e) {
var code = e.keyCode || e.which;
if (e.target.id !== textareaId || code !== 67) {
return
}
container.style.display = 'none'
}
document.addEventListener('keydown', keyDownMonitor)
document.addEventListener('keyup', keyUpMonitor)
}
TrelloClipboard.prototype.setValue = function (value) {
this.value = value;
}
var clip = new TrelloClipboard();
clip.setValue("test");
実際の例を参照してください: http://jsfiddle.net/AGEf7/
Daniel LeCheminant のコードは、CoffeeScript から JavaScript ( js2coffee ) に変換した後、うまくいきませんでした。それはライン上で爆撃し続けました_.defer()。
これは jQuery の deferred と関係があると思っていたので、変更し$.Deferred()て現在は動作しています。jQuery 2.1.1 を使用して、Internet Explorer 11、Firefox 35、および Chrome 39 でテストしました。使用法は、ダニエルの投稿で説明されているものと同じです。
var TrelloClipboard;
TrelloClipboard = new ((function () {
function _Class() {
this.value = "";
$(document).keydown((function (_this) {
return function (e) {
var _ref, _ref1;
if (!_this.value || !(e.ctrlKey || e.metaKey)) {
return;
}
if ($(e.target).is("input:visible,textarea:visible")) {
return;
}
if (typeof window.getSelection === "function" ? (_ref = window.getSelection()) != null ? _ref.toString() : void 0 : void 0) {
return;
}
if ((_ref1 = document.selection) != null ? _ref1.createRange().text : void 0) {
return;
}
return $.Deferred(function () {
var $clipboardContainer;
$clipboardContainer = $("#clipboard-container");
$clipboardContainer.empty().show();
return $("<textarea id='clipboard'></textarea>").val(_this.value).appendTo($clipboardContainer).focus().select();
});
};
})(this));
$(document).keyup(function (e) {
if ($(e.target).is("#clipboard")) {
return $("#clipboard-container").empty().hide();
}
});
}
_Class.prototype.set = function (value) {
this.value = value;
};
return _Class;
})());
URL を短縮すると、http://goo.glで非常によく似たものが表示されます。
プログラムでフォーカスされる読み取り専用の入力要素があり、ツールチップを押しCTRL-Cてコピーします。
そのショートカットを押すと、入力コンテンツが効果的にクリップボードに取り込まれます。すごくいい ：）