<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On Select Copy To Clipboard Using JavaScript</title>
<!--<link rel="stylesheet" href="style.css">-->
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 200px;
}
input{
box-shadow: 0 0 5px;
}
pre{
box-shadow: 0 0 5px;
}
textarea{
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
width: auto;
resize: none;
overflow: auto;
box-shadow: 0 0 5px;
}
.container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
gap: 10px;
border: 2px solid gold;
margin: 10px;
padding: 10px;
background-color: antiquewhite;
}
.reload{
height: 25px;
width: 100px;
box-shadow: 0 0 5px;
}
.output{
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
width: auto;
resize: both;
}
</style>
</head>
<body>
<div class="container">
<!--input file-->
<input type="file" />
<!--button to reload page-->
<button class="reload">Refresh Page</button>
<!--file output in textarea-->
<textarea class="input" readonly placeholder="input file content"></textarea>
<!--for testing select copy-->
<pre class="output" ></pre>
<!--for testing paste-->
<textarea class="output1" placeholder="test paste here"></textarea>
</div>
</body>
<!--<script src="script.js"></script>-->
<script>
// addeventlistener select event
document.querySelector('.input').addEventListener('select',(e)=>{
let selection = e.target.value.substring(
e.target.selectionStart,
e.target.selectionEnd
);
// assign selection content to pre
document.querySelector('pre').textContent = selection;
let pre = document.querySelector('pre').textContent;
// copy pre tag content to navigator api clipboard
navigator.clipboard.writeText(pre).then(()=>{
alert("copied to clipboard !");
});
});
// open file
document.querySelector('input').addEventListener('change',function(){
// filereader constructor
let filereader = new FileReader();
//function for onload event
filereader.onload = function(){
//output location 'textarea'
document.querySelector('.input').value = filereader.result;
}
// readastext()
filereader.readAsText(this.files[0]);
//screen width height
let width = document.querySelector('.input').innerHTML+screen.width;
let height = document.querySelector('.input').innerHTML+screen.height;
// resize textarea for content
document.querySelector('.input').style.width = `${width-100}px`;
document.querySelector('.input').style.height = `${height}px`;
});
// reload page button
document.querySelector('.reload').addEventListener('click',()=>{
window.location.reload();
});
//outpu1 box
document.querySelector('.output1').addEventListener('input',(e)=>{
//screen width height
let width = document.querySelector('.output1').innerHTML+screen.availWidth;
let height = document.querySelector('.output1').innerHTML+screen.availHeight;
// resize textarea for content
document.querySelector('.output1').style.width = `${width-100}px`;
document.querySelector('.output1').style.height = `${height}px`;
});
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On Select Copy To Clipboard Using JavaScript</title>
<!--<link rel="stylesheet" href="style.css">-->
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 200px;
}
input{
box-shadow: 0 0 5px;
}
pre{
box-shadow: 0 0 5px;
}
textarea{
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
width: auto;
resize: none;
overflow: auto;
box-shadow: 0 0 5px;
}
.container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
gap: 10px;
border: 2px solid gold;
margin: 10px;
padding: 10px;
background-color: antiquewhite;
}
.reload{
height: 25px;
width: 100px;
box-shadow: 0 0 5px;
}
.output{
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
width: auto;
resize: both;
}
</style>
</head>
<body>
<div class="container">
<!--input file-->
<input type="file" />
<!--button to reload page-->
<button class="reload">Refresh Page</button>
<!--file output in textarea-->
<textarea class="input" readonly placeholder="input file content"></textarea>
<!--for testing select copy-->
<pre class="output" ></pre>
<!--for testing paste-->
<textarea class="output1" placeholder="test paste here"></textarea>
</div>
</body>
<!--<script src="script.js"></script>-->
<script>
// addeventlistener select event
document.querySelector('.input').addEventListener('select',(e)=>{
let selection = e.target.value.substring(
e.target.selectionStart,
e.target.selectionEnd
);
// assign selection content to pre
document.querySelector('pre').textContent = selection;
let pre = document.querySelector('pre').textContent;
// copy pre tag content to navigator api clipboard
navigator.clipboard.writeText(pre).then(()=>{
alert("copied to clipboard !");
});
});
// open file
document.querySelector('input').addEventListener('change',function(){
// filereader constructor
let filereader = new FileReader();
//function for onload event
filereader.onload = function(){
//output location 'textarea'
document.querySelector('.input').value = filereader.result;
}
// readastext()
filereader.readAsText(this.files[0]);
//screen width height
let width = document.querySelector('.input').innerHTML+screen.width;
let height = document.querySelector('.input').innerHTML+screen.height;
// resize textarea for content
document.querySelector('.input').style.width = `${width-100}px`;
document.querySelector('.input').style.height = `${height}px`;
});
// reload page button
document.querySelector('.reload').addEventListener('click',()=>{
window.location.reload();
});
//outpu1 box
document.querySelector('.output1').addEventListener('input',(e)=>{
//screen width height
let width = document.querySelector('.output1').innerHTML+screen.availWidth;
let height = document.querySelector('.output1').innerHTML+screen.availHeight;
// resize textarea for content
document.querySelector('.output1').style.width = `${width-100}px`;
document.querySelector('.output1').style.height = `${height}px`;
});
</script>
</html>
