इसे करने का सबसे अच्छा तरीका मिला। मेरा मतलब है सबसे तेज़ तरीका: w3school
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
प्रतिक्रियाशील घटक के अंदर। हैंडल नाम से एक फंक्शन बनाएं:
function handleCopy() {
// get the input Element ID. Save the reference into copyText
var copyText = document.getElementById("mail")
// select() will select all data from this input field filled
copyText.select()
copyText.setSelectionRange(0, 99999)
// execCommand() works just fine except IE 8. as w3schools mention
document.execCommand("copy")
// alert the copied value from text input
alert(`Email copied: ${copyText.value} `)
}
<>
<input
readOnly
type="text"
value="exemple@email.com"
id="mail"
/>
<button onClick={handleCopy}>Copy email</button>
</>
यदि React का उपयोग नहीं कर रहे हैं, तो w3schools के पास टूलटिप के साथ ऐसा करने का एक अच्छा तरीका है: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy -clipboard2
यदि रिएक्ट का उपयोग कर रहे हैं, तो एक अच्छा विचार करें: संदेश को सचेत करने के लिए एक टोस्टिफाइ का उपयोग करें।
https://github.com/fkhadra/react-toastify यह उपयोग करने के लिए बहुत आसान है। स्थापना के बाद, आप इस लाइन को बदलने में सक्षम हो सकते हैं:
alert(`Email copied: ${copyText.value} `)
कुछ इस तरह के लिए:
toast.success(`Email Copied: ${copyText.value} `)
यदि आप इसका उपयोग करना चाहते हैं, तो इंस्टॉल टोस्टिफाइ करना न भूलें। ToastContainer और भी toss css का आयात करें:
import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
और वापसी के अंदर टोस्ट कंटेनर जोड़ें।
import React from "react"
import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
export default function Exemple() {
function handleCopy() {
var copyText = document.getElementById("mail")
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand("copy")
toast.success(`Hi! Now you can: ctrl+v: ${copyText.value} `)
}
return (
<>
<ToastContainer />
<Container>
<span>E-mail</span>
<input
readOnly
type="text"
value="myemail@exemple.com"
id="mail"
/>
<button onClick={handleCopy}>Copy Email</button>
</Container>
</>
)
}