Выберите div по идентификатору и скопируйте содержимое в js - PullRequest
Новая
       3

Выберите div по идентификатору и скопируйте содержимое в js

0 голосов
/ 07 апреля 2020

Я делаю простой редактор уценки, мне нужна кнопка справа, чтобы скопировать вывод. Я не понимаю, почему приведенный ниже код не работает, я попробовал несколько вариантов, а также несколько других методов.

Есть идеи, как заставить работать вторую кнопку? CopyMD один отлично работает.

JS

function copyMD() {
    document.querySelector("button").onclick = function() {
        document.querySelector("textarea").select();
        document.execCommand('copy');
    };
}
function copyOP() {
    document.querySelector("button").onclick = function() {
        document.getElementById("output").select();
        document.execCommand('copy');
    };
}

HTML

<div class="markdown-editor">
    <div class="markdown-editor_left-panel">
        <textarea bind:value={source} name="source" class="markdown-editor_source"></textarea>
    </div>

    <div class="markdown-editor_right-panel">
        <div class="markdown-editor_output" id="output">{@html markdown}</div>
    </div>
</div>
<div class="buttons">
    <button class="btn" on:click={copyMD}>Copy Markdown</button>
    <button class="btn" id="btn2" on:click={copyOP}>Copy Output</button>
</div>

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Я немного изменил ваш код - но вам может помочь следующее. Запустите фрагмент кода.

Обратите внимание, я изменил способ обратного вызова в html. Возможно, вы захотите изменить это обратно на svelte.

Обновление: что не так с вашим кодом

Обратный вызов, который вы прикрепили к кнопкам, сам прикреплял обратный вызов к кнопкам. Я не знаю много о svelte, но я знаю это: в ваших обратных вызовах вы получаете ссылку на кнопку, а затем прикрепляете обратный вызов. Это кажется неправильным. Вы должны либо прикрепить обратный вызов в javascript вне вызовов любой функции, поэтому он присоединяется при загрузке скрипта javascript, либо вы присоединяете его в html - это более приятный вариант и то, что я здесь сделал. Опять же, в обратных вызовах, которые вы прикрепили к кнопкам html, вы добавляли обратный вызов к кнопкам. Это имеет смысл? 

function copyMD(){
     document.querySelector("textarea").select();
     document.execCommand('copy');
}
function copyOP(){
// apparently select only works for text area and docment.execCommand I think it deprecated.
    const output = document.getElementById("output").innerHTML;
// the navigator object in a browser holds lots of useful utilities, such as location services and clipboard interface.
    const theClipboard = navigator.clipboard;
// write text returns a promise, so use `then` to react to success
    theClipboard.writeText(output).then(() => console.log('copied to clipboard'));
}
<div class="markdown-editor">
    <div class="markdown-editor_left-panel">
        <textarea bind:value={source} name="source" class="markdown-editor_source"></textarea>
    </div>

    <div class="markdown-editor_right-panel">
        <div class="markdown-editor_output" id="output">{@html markdown}</div>
    </div>
</div>
<div class="buttons">
    <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->
    <button class="btn" onclick="copyMD()">Copy Markdown</button>
    <!-- I change this to onclick so it would work in stack overflow, perhaps you can put this back to svelte syntax -->
    <button class="btn" id="btn2" onclick="copyOP()">Copy Output</button>
</div>
0 голосов
/ 07 апреля 2020

.select будет работать только с текстовой областью. Вы можете использовать inner HTML для элемента div, чтобы получить его содержимое

...