How to Access Data from Clipboard - Rauf Graphics
How to Access Data from Clipboard

Using JavaScript you can copy the data or code or text to clipboard but do you know you can also assess that from clipboard using javascript.

And today I am going to tell you the method by which you can do that.

This utility is not given in all browsers but in Google Chrome it works perfectly fine.

I founded the solution when I was searching for creating a bot I was making a bot that works for me and I want to access my data from a clipboard so I found this solution and I decided to share it with you.

Below is the code provided this code works to get data from clipboard and copy data to clipboard you can simply try it out.


<div>
  <input type="text" class="to-copy" placeholder="Type something..." aria-label="Type something">
  <button class="write-btn">Copy to clipboard</button>
</div>

<div>
  <h3 class="clipboard-results"></h3>
  <button class="read-btn">Paste from clipboard</button>
</div>

<script>
const readBtn = document.querySelector('.read-btn');
const writeBtn = document.querySelector('.write-btn');

const resultsEl = document.querySelector('.clipboard-results');
const inputEl = document.querySelector('.to-copy');

readBtn.addEventListener('click', () => {
  navigator.clipboard.readText()
    .then(text => {
      resultsEl.innerText = text;
    })
    .catch(err => {
      console.log('Something went wrong', err);
    })
});

writeBtn.addEventListener('click', () => {
  const inputValue = inputEl.value.trim();
  if (inputValue) {
    navigator.clipboard.writeText(inputValue)
      .then(() => {
        inputEl.value = '';
        if (writeBtn.innerText !== 'Copied!') {
          const originalText = writeBtn.innerText;
          writeBtn.innerText = 'Copied!';
          setTimeout(() => {
            writeBtn.innerText = originalText;
          }, 1500);
        }
      })
      .catch(err => {
        console.log('Something went wrong', err);
      })
  }
});
</script>


Access data from clipboard when this script is executed user will be prompted to give permission if the permission is granted then this code will work and if the user disallowed that then this function will not work.

I hope this script help you If you want tutorials like this subscribe to the newsletters of this Blog by entering your email id below form.
How to Access Data from Clipboard

How to Access Data from Clipboard

How to Access Data from Clipboard

Using JavaScript you can copy the data or code or text to clipboard but do you know you can also assess that from clipboard using javascript.

And today I am going to tell you the method by which you can do that.

This utility is not given in all browsers but in Google Chrome it works perfectly fine.

I founded the solution when I was searching for creating a bot I was making a bot that works for me and I want to access my data from a clipboard so I found this solution and I decided to share it with you.

Below is the code provided this code works to get data from clipboard and copy data to clipboard you can simply try it out.


<div>
  <input type="text" class="to-copy" placeholder="Type something..." aria-label="Type something">
  <button class="write-btn">Copy to clipboard</button>
</div>

<div>
  <h3 class="clipboard-results"></h3>
  <button class="read-btn">Paste from clipboard</button>
</div>

<script>
const readBtn = document.querySelector('.read-btn');
const writeBtn = document.querySelector('.write-btn');

const resultsEl = document.querySelector('.clipboard-results');
const inputEl = document.querySelector('.to-copy');

readBtn.addEventListener('click', () => {
  navigator.clipboard.readText()
    .then(text => {
      resultsEl.innerText = text;
    })
    .catch(err => {
      console.log('Something went wrong', err);
    })
});

writeBtn.addEventListener('click', () => {
  const inputValue = inputEl.value.trim();
  if (inputValue) {
    navigator.clipboard.writeText(inputValue)
      .then(() => {
        inputEl.value = '';
        if (writeBtn.innerText !== 'Copied!') {
          const originalText = writeBtn.innerText;
          writeBtn.innerText = 'Copied!';
          setTimeout(() => {
            writeBtn.innerText = originalText;
          }, 1500);
        }
      })
      .catch(err => {
        console.log('Something went wrong', err);
      })
  }
});
</script>


Access data from clipboard when this script is executed user will be prompted to give permission if the permission is granted then this code will work and if the user disallowed that then this function will not work.

I hope this script help you If you want tutorials like this subscribe to the newsletters of this Blog by entering your email id below form.
Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo
close