Treello는 사용자의 클립보드에 어떻게 액세스합니까?
Treello에서 카드 위에 마우스를 올려놓고 C+를 누르면 이 카드의 URL이 클립보드에 복사됩니다.어떻게 하는 거지?
제가 알기로는 플래시 무비는 없습니다.Flashblock을 설치했는데 Firefox 네트워크 탭에 Flash 무비가 로드되지 않았습니다.(예를 들어 ZeroClipboard에 의한 일반적인 방법입니다.)
그들은 어떻게 이 마법을 부릴까?
(지금 이 순간 깨달음을 얻은 것 같습니다.페이지에서 텍스트를 선택할 수 없기 때문에 보이지 않는 요소가 있을 수 있습니다.JavaScript 코드를 통해 텍스트 선택을 생성하고 C+는 브라우저의 기본 동작을 트리거하여 해당 보이지 않는 노드의 텍스트 값을 복사합니다.)
공개:Treello가 사용하는 코드를 작성했습니다.아래 코드는 Treello가 클립보드 트릭을 실행하기 위해 사용하는 실제 소스 코드입니다.
실제로 "사용자의 클립보드에 액세스"하는 것이 아니라 사용자가 C+를 누를 때 유용한 항목을 선택하여 사용자를 지원합니다.
알고 계신 것 같습니다.+C 키를 누르려면 먼저 키를 눌러야 합니다.키를 누르면 클립보드에 표시할 텍스트를 포함하는 텍스트 영역이 팝업되고 그 안에 있는 모든 텍스트가 선택되므로 키를 누를 때 텍스트 영역이 모두 선택됩니다(그 후 키가 나타나면 텍스트 영역을 숨깁니다).
특히 Treello는 다음과 같은 작업을 수행합니다.
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)
그러면 클립보드 도우미는 키를 눌렀을 때 무엇을 선택해야 하는지 알 수 있습니다.
실제로 크롬 확장기능을 구축하여 모든 웹페이지에 대응하고 있습니다.소스 코드는 GitHub에 있습니다.
Treello의 접근법에서 3가지 버그를 발견했는데, 이는 제가 직접 겪어봤기 때문에 잘 알고 있습니다.
다음의 시나리오에서는, 카피는 동작하지 않습니다.
- 이미 를 누른 다음 링크를 마우스로 가리키고 을 누르면 복사가 작동하지 않습니다.
- 커서가 페이지의 다른 텍스트 필드에 있으면 복사본이 작동하지 않습니다.
- 커서가 주소 표시줄에 있으면 복사본이 작동하지 않습니다.
사용자가 Cmd/를 누를 때 스팬을 만드는 것이 아니라 항상 스팬을 숨겨서 1위를 해결했습니다.
제로렝스 선택을 일시적으로 클리어하고 캐럿 위치를 저장하고 복사하여 캐럿 위치를 복원하여 #2를 해결했습니다.
#3의 수정은 아직 발견되지 않았습니다. :) (자세한 내용은 GitHub 프로젝트의 미해결 이슈를 확인해 주세요.)
GitHub의 레인코트 코드의 도움으로, 플레인 자바스크립트로 클립보드에 접속하는 실행 버전을 얻을 수 있었습니다.
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의 코드가 Coffee에서 JavaScript(js2coffee)로 변환된 후 작동하지 않았습니다.계속 폭격했어요_.defer()linedisplaces를 합니다.
이 있을 되어 jQuery로 했습니다.$.Deferred()그리고 이제 효과가 있어요.2.1jQuery 2.1.을 사용하여 11, 35,했습니다.사용법은 다니엘의 투고 내용과 동일합니다.
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 에 같은 것이 표시됩니다.
프로그램 포커스를 맞추는 읽기 전용 입력 요소가 있으며 +를 C눌러 복사합니다.
이 바로 가기를 누르면 입력 내용이 클립보드에 효과적으로 들어갑니다.정말 좋다 :)
언급URL : https://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard
'programing' 카테고리의 다른 글
| 페이지 로드 시간을 단축하려면 이 WordPress javascript 스니펫을 마지막으로 로드하려면 어떻게 연기하거나 비동기화해야 합니까? (0) | 2022.11.27 |
|---|---|
| 컬을 사용하여 PHP에서 HTTP 코드 가져오기 (0) | 2022.11.27 |
| 날짜 및 시간별 Date Time 그룹 (0) | 2022.11.27 |
| mysql의 타임스탬프에서 날짜만 가져옵니다. (0) | 2022.11.27 |
| JavaScript에서 정수 나눗셈을 수행하고 나머지를 별도로 얻는 방법은 무엇입니까? (0) | 2022.11.27 |