हेल्लो दोस्तों,आज हम HTML CSS एवं Java Code के माध्यम से Text Area में लिखे गए Word को कॉपी किये जाने वाला Project को बनाना सीखेंगे
Text Area Copy Code
जब हम अपने वेबसाइट पर कोई कोड या कोई सूचना प्रदर्शित करते है तो जहाँ पर सूचनाएं प्रदर्शित होती है उस एरिया को हम Text एरिया कहते है जब हम कोई HTML या CSS Code को अपने वेबसाइट पर दिखाते है तो उसमे कॉपी बटन को भी लगाते है जिससे उस कोड को आसानी से कॉपी किया जा सके
Text Area Copy Code Demo
तो चलिए अब हम HTML CSS एवं Java Code के माध्यम से Text Area में लिखे गए Word को कॉपी किये जाने वाला Project को बनाना शुरू करते है
सबसे पहले हम Text एरिया को CSS कोड से Style देंगे
input[type="text" i] {
padding: 10px 2px;
width: 200px;
height:100px;
background:#f1f1f1;
text-align:center;
border: 2px solid red;
}
उपरोक्त CSS कोड में हमने टेक्स्ट एरिया के Width, Height, background color और Border को style दिए है यदि आप चाहे तो उपरोक्त कोड में कोई भी परिवर्तन अपने अनुसार कर सकते है
अब इसके बाद हम Text Area को बीच में करने के लिए .center का element create करेंगे
.center {
display: flex;
justify-content: center;
align-items: center;
}
अब हमारा जो अगला स्टेप है उसमे हम बटन को style देंगे जिसे आप नीचे दिए गए CSS Code में देख सकते है
button {
padding: 5px 8px;
margin-top:10px;
background:red;
color:white;
border: 2px solid red;
border-radius: 50px 20px;
}
उपरोक्त CSS Code के माध्यम से हमने बटन के साइज, कलर, बैकग्राउंड कलर को स्टाइल दिया है आप चाहे तो अपने अनुसार संशोधित कर सकते है
Tooltip
जब हम कर्सर को कॉपी वाले बटन पर ले जायेंगे तो हमें वहाँ पर एक नोटिफिकेशन दिखाई देगा जो नोटिफिकेशन दिखाने वाले एरिया है उसे हम Tooltip कहते है
अब हम Tooltip को style देंगे इसमें हम Tooltip को हाईड करेंगे जिससे जब हम कर्सर को बटन पर ले जाये तब ही दिखे
.tooltip {
position: relative;
display: inline-block;
}
..tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
background:#fee185;
color:#000;
}
इस कोड के माध्यम से tooltip को position, color, Border, width को style दिए है आप चाहे तो अपने अनुसार इसे customize कर सकते है
अब हमें HTML Tag को Create करना है सबसे पहले हम text एरिया को center में करने के लिए नीचे दिए गए कोड का Use करेंगे
<div class="center">
अब इसके बाद हम text value वाले टैग को बनायेंगे
<input type="text" value="Adviser Sathi" id="myInput">
अब हम इसे </div> element से Close कर देंगे
अब हम फिर से <div class="center"> इस वाले tag को लिखेंगे इसके बाद हम tooltip tag को Use करेंगे
<div class="tooltip">
अब इसके बाद हम बटन को बनायेंगे एवं बटन command को सेट करेंगे जिससे कॉपी बटन पर क्लिक करने के बाद हमारा text कॉपी हो जाये
<button onclick="myFunction()" onmouseout="outFunc()">
अब जो हमारे tooltip में text लिखकर आता है उसे create करेंगे
<span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
Copy text
</button>
अब हम इसे </div> element से Close कर देंगे
अब हम Java Code को बनायेंगे जिसमे select text , copy code, copy किये गए text के अलर्ट जैसे script कोड शामिल है
अब जो हमारा कोड है उससे text area से text को प्राप्त करके select करना एवं कॉपी करने का है फिर tooltip में alert देगा की कोड कॉपी हो गया है जिसका script code नीचे दिया हुआ है
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copied: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copy to clipboard";
}
</script>
इस तरह से हमारा Text Area में लिखे गए Word को कॉपी किये जाने वाला Project तैयार है आप चाहे तो नीचे दिए गए copy code पर click करके HTML, CSS एवं Java script कोड को कॉपी कर सकते है