Этот код содержит две кнопки, первая отправляет некоторый текст для преобразования в JSON, а вторая копирует результат в буфер обмена. Было бы здорово иметь возможность делать и то, и другое одним щелчком мыши. Есть ли способ объединить их, чтобы при нажатии кнопки отправки JSON автоматически копировался в буфер обмена?

<html>
<body>
    
<form id='foobar'>
    <label for='event_name'>Event Name</label>
  <input type="text" id="event_name" name='event_name' value="Concert"/>
    <label for='venue_name'>Venue Name</label>
    <input type="text" id="venue_name" name="venue_name" value="Theater" />
  <input type='submit' />
</form>

<pre id='output'>Input some value and submit</pre>

<script>
    
document.getElementById('foobar').addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const data = Array.from(formData.entries()).reduce((memo, pair) => ({
    ...memo,
    [pair[0]]: pair[1],
  }), {});
  document.getElementById('output').innerHTML = JSON.stringify(data);
});

// Copy button


    function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}

make_copy_button(document.getElementById("output"));

</script>

</body>
</html>
3
jcp543 29 Авг 2020 в 03:04

2 ответа

Лучший ответ

Да, это возможно. Вы можете просто вызвать функцию selectElementContents() после применения innerHTML к output, а затем отправить это element в свою функцию, чтобы иметь возможность скопировать content на clicking кнопка отправки.

Кроме того, только с одним button вам нужны другие функции two для создания button вручную. Поскольку results теперь можно достичь с помощью одной кнопки, то есть при нажатии submit - команда копирования будет применена ко всему выходу JSON.

Живая демоверсия .

let output = document.getElementById('output')
document.getElementById('foobar').addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData(e.target);
  const data = Array.from(formData.entries()).reduce((memo, pair) => ({
    ...memo,
    [pair[0]]: pair[1],
  }), {});
  output.innerHTML = JSON.stringify(data);
  selectElementContents(output) //copy to clipboard
});

// Copy to clipboard
function selectElementContents(el) {
  // Copy textarea, pre, div, etc.
  if (document.body.createTextRange) {
    // IE
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.select();
    textRange.execCommand("Copy");
  } else if (window.getSelection && document.createRange) {
    // Non-Internet Explorer
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  }
}
<html>

<body>

  <form id='foobar'>
    <label for='event_name'>Event Name</label>
    <input type="text" id="event_name" name='event_name' value="Concert" />
    <label for='venue_name'>Venue Name</label>
    <input type="text" id="venue_name" name="venue_name" value="Theater" />
    <input type='submit' value="Submit" />
  </form>

  <pre id='output'>Input some value and submit</pre>

</body>

</html>
2
AlwaysHelping 29 Авг 2020 в 00:24

Более лаконичный пример:

function copyJsonToClipboard() {
   //Example object
   const data = {
      eventName: "Concert",
      venueName: "Theater"
   };
   //Converting the object to JSON
   const json = JSON.stringify(data);
   //Copying the JSON to the clipboard
   navigator.clipboard.writeText(json);
}

См. JSON.stringify и < a href = "https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText" rel = "nofollow noreferrer"> clipboard.writeText .

0
Stanislas 29 Авг 2020 в 00:27