84 lines
2.7 KiB
PHP
84 lines
2.7 KiB
PHP
<div style="padding-bottom: 350px;">
|
|
<div class="container-dxu">
|
|
<h2 style="text-align: center; font-size: 25px; padding-bottom: 10px;">Remove Multiple Whitespace</h2>
|
|
<textarea class="textarea-text" id="textInput" rows="4" cols="50" placeholder="Enter text here..."></textarea>
|
|
<button class="button-style" onclick="processText()">Remove</button>
|
|
<div style="display: none;" id="after-procces">
|
|
<div id="output"></div>
|
|
<P style="display: none; text-align: center;" id="copied-notice"></P>
|
|
<button class="button-style" id="copyButton" onclick="copyOutputText()">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function removeMultipleWhitespace(text) {
|
|
return text.replace(/\s+/g, ' ').trim();
|
|
}
|
|
|
|
function processText() {
|
|
const inputText = document.getElementById('textInput').value;
|
|
const cleanedText = removeMultipleWhitespace(inputText);
|
|
document.getElementById('output').innerText = cleanedText;
|
|
document.getElementById('after-procces').style.display='block';
|
|
}
|
|
|
|
function copyOutputText() {
|
|
const outputText = document.getElementById('output').innerText;
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = outputText;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'Output text copied to clipboard!';
|
|
}
|
|
</script>
|
|
<style>
|
|
.container-dxu {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background-color: #3d3d3d;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.textarea-text {
|
|
width: calc(100% );
|
|
height: 100px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
background-color: #3d3d3d;
|
|
}
|
|
.button-style{
|
|
padding: 10px 20px;
|
|
background-color: #7d7d7d;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
.button-style:hover {
|
|
background-color: #9d9d9d;
|
|
}
|
|
#output {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
background-color: #3d3d3d;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style> |