October 6, 2022

Robotic Notes

All technology News

navigator.clipboard API

2 min read

Reading from and writing to the user’s clipboard can be both a very useful and dangerous capability. Used correctly and it’s a huge convenience to the user; used dubiously and the user could suffer catastrophic consequences. Imagine a wrong account number or wallet address being copied – yikes! This is why programmatic copy and pasting needs to be protected, and why the JavaScript Clipboard API requires explicit user permission to allow a website to use it.

To read to the user’s clipboard, you use the readText method:

const clipboardData = await navigator.clipboard.readText();

To write to the user’s clipboard, you use the writeText method:

await navigator.clipboard.writeText('');

The API is obviously very easy to use – each method returns a Promise so you can use async/await or then callbacks. The difficult part is striking the balance of when to use each. Unnecessary reads will feel invasive, and unnecessary writes will significantly dissolve user trust.

When may you want to write to the clipboard? Possibly after the user pastes a seed phrase, password, or credit card number into likewise named form fields.

Sure you can use the numerous libraries available to simulate this API, but know that an official API does exist. And as always, I’m teaching you how to use it – it’s up to you to ensure it’s the right time and tool for the job!

Website performance monitoring
Website performance monitoring
Website performance monitoring
Website performance monitoring
  • I & # 8217; m an Impostor

    I’m an Impostor

    This is the hardest thing I’ve ever had to write, much less admit to myself. I’ve written resignation letters from jobs I’ve loved, I’ve ended relationships, I’ve failed at a host of tasks, and let myself down in my life. All of those feelings were very …

  • CSS Gradients

    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome …

  • RealTime Stock Quotes with MooTools Request.Stocks and YQL

    RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools’ inheritance pattern allows for the creation of small, simple classes that possess immense power. One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP: Request.Stocks. Created by Enrique Erne, this great MooTools class acts as …

  • Scrolling & # 8220; Agree to Terms & # 8221;  Component with MooTools ScrollSpy

Source link