Select All Text by Clicking on Text Field or Textarea Box
This script highlight all text in textarea or text field (input tag) by clicking on it. It allows users to reduce their manual work. For instance when users need to copy to the clipboard all text quickly or quickly delete the text from the field. For example: to copy a piece of code or to delete a username and password on login web page.
Code
The script is really very simple. Text field must have unique identifier, this indentifier will be passed to the SelectAll() function. The function call only two methods: focus() and select().
<script type="text/javascript"> function SelectAll(id) { document.getElementById(id).focus(); document.getElementById(id).select(); } </script> Textarea:<br> <textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </div> <hr/> <div class="text-center" style=" font-size: 24px; font-weight: bold; color: #00b8d4;"> <a target="_blank" href="https://api.whatsapp.com/send?text= Hi, Check this post:. http://www.atnyla.com/blog/select-all-text-by-clicking-on-text-field-or-textarea-box" > Share this Post: <i class="fa-brands fa-whatsapp"></i> </a> </div> <hr/> </div> </div> <div class="row" style="margin-bottom: 5px"> <h3 class="text-center"> Related Posts</h3> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-584131101-Capture.PNG" class="card-img-top" alt="Installation and setup process of SASS and scss" /> <div class="card-body"> <h5 class="card-title">Installation and setup process of SASS and scss</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="installation-and-setup-process-of-sass-and-scss" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-179201502-Capture.PNG" class="card-img-top" alt="AngularJS interview questions and answers" /> <div class="card-body"> <h5 class="card-title">AngularJS interview questions and answers</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="angularjs-interview-questions-and-answers" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-349780086-FullStackSoftwareDevelopers.png" class="card-img-top" alt="MEAN stack consultant" /> <div class="card-body"> <h5 class="card-title">MEAN stack consultant</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="mean-stack-consultant" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-570674348-sanitize.jpg" class="card-img-top" alt="Sanitize user inputs" /> <div class="card-body"> <h5 class="card-title">Sanitize user inputs</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="sanitize-user-inputs" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-449326882-odelobster-ide.png" class="card-img-top" alt="Free PHP, HTML, CSS, JavaScript/TypeScript editor - CodeLobster IDE" /> <div class="card-body"> <h5 class="card-title">Free PHP, HTML, CSS, JavaScript/TypeScript editor - CodeLobster IDE</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="free-php-html-css-javascript-typescript-editor-codelobster-ide" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-770013832-difference-between-mysql-collection.png" class="card-img-top" alt="mysql collection" /> <div class="card-body"> <h5 class="card-title">What is thee difference between utf8_general_ci and utf8mb4_unicode_520_ci in mysql collection</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="what-is-thee-difference-between-utf8-general-ci-and-utf8mb4-unicode-520-ci-in-mysql-collection" class="">Read More...</a> </div> </div> </div> </div> </div> <div class="row mt-4 p-3 bg-light rounded" style="margin-bottom: 5px" id="loadDataHere"> <h2 class="heading_info text-center">More Posts: </h2> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-660175436-store-procedure-in-sql-server.png" class="card-img-top" alt="Create Store Procedure in SQL Server" /> <div class="card-body"> <h5 class="card-title">Create Store Procedure in SQL Server</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="create-store-procedure-in-sql-server" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-666317414-dua-to-increase-memory.png" class="card-img-top" alt="Etiquette and dua to increase memory" /> <div class="card-body"> <h5 class="card-title">স্মরণশক্তি বৃদ্ধি পাওয়ার আদব ও দু'আ</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="etiquette-and-dua-to-increase-memory" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/76096614_web-config-file.png" class="card-img-top" alt="create login system using the config file" /> <div class="card-body"> <h5 class="card-title">Create a login system using config file using .net web aplication</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="create-a-login-system-using-config-file-using-net-web-aplication" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/258574266_Examples-of-Words-of-Appreciation.png" class="card-img-top" alt="Examples of Words of Appreciation" /> <div class="card-body"> <h5 class="card-title">Examples of Words of Appreciation</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="examples-of-words-of-appreciation" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/37221611_NLP.png" class="card-img-top" alt="Natural Language Processing" /> <div class="card-body"> <h5 class="card-title">Natural Language Processing(NLP)</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="natural-language-processing-nlp-" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/914941926_create-a-procedure-using-sql-server.png" class="card-img-top" alt="Create a procedure with output parameter using sql server" /> <div class="card-body"> <h5 class="card-title">Create a procedure with output parameter using sql server</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="create-a-procedure-with-output-parameter-using-sql-server" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/" class="card-img-top" alt="" /> <div class="card-body"> <h5 class="card-title">What is the best way to read in order to retain the information for a longer period of time?</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="what-is-the-best-way-to-read-in-order-to-retain-the-information-for-a-longer-period-of-time" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/blog-image-934101963-etiquette-and-dua-for-boarding-a-vehicle.JPG" class="card-img-top" alt="Etiquette and dua for boarding a vehicle" /> <div class="card-body"> <h5 class="card-title">যানবাহনে আরোহণের আদব ও দু'আ</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="etiquette-and-dua-for-boarding-a-vehicle" class="">Read More...</a> </div> </div> </div> </div> <div class="col-lg-4" style="margin-bottom: 10px"> <div class="card" style="width: 100%"> <img src="write-blog/images/148127680_English-to-Bengali-Names-of-Vegetables-Legumes-and-Spices.png" class="card-img-top" alt="English to Bengali Names of Vegetables, Legumes and Spices" /> <div class="card-body"> <h5 class="card-title">English to Bengali Names of Vegetables, Legumes and Spices</h5> <p class="card-text"> </p> <div class="main-button-gradient"> <a href="english-to-bengali-names-of-vegetables-legumes-and-spices" class="">Read More...</a> </div> </div> </div> </div> </div> <div class="container d-flex justify-content-center"> <div class="spinner-border m-5 text-primary" id = "loading" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: blue; /* Set a background color */ background-color: transparent; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6); color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ border-radius: 50%; } #myBtn:hover { background-color: #00a7f5; /* Add a dark-grey background on hover */ } </style> <script> // Get the button: let mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } </script> <footer id="footer" style = "background: linear-gradient(to right, #1a2980, #26d0ce); margin-top: 10px;" class = "text-white p-3"> <div class="footer-top"> <div class="container-fluid"> <div class="row"> <div class="col-lg-2 col-md-6 footer-contact text-white"> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Useful Links</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/" class = "text-white">Home</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/" class = "text-white">About us</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/terms-and-conditions/" class = "text-white">Terms of service</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/guest-post" class = "text-white">Guest Post</a></li> <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.atnyla.com/about/ads/" class = "text-white">Advertisement</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links text-white"> <p style="font-size: 16px; color: white;">Login</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">login</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">Sign Up</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-newsletter"> <p style="font-size: 16px; color: white;">Visit All Home</p> <ul> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/java-programming-language" class = "text-white">Subject</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/" class = "text-white">Library</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/blog/" class = "text-white">Blog</a></li> <!--<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>--> <!--<form action="" method="post">--> <!-- <input type="email" name="email"><input type="submit" value="Subscribe">--> <!--</form>--> </ul> </div> <!--<div class="col-lg-2 col-md-6 footer-newsletter">--> <!-- <p style="font-size: 16px; color: white; ">Social Links</p>--> <!-- <ul> --> <!-- <li> <a href = "https://chat.whatsapp.com/BfdvA6k89H28bD4q4QqiaK" class="text-white"> Join Whatsapp Group <i class="fa-brands fa-whatsapp"> </i> </a></li>--> <!--<li> <a href = "https://t.me/ComputerLanguageWithRumman" class="text-white"> Join Telegram Group <i class="fa-brands fa-telegram"></i> </i> </a></li>--> <!--</ul>--> <!--</div>--> </div> </div> </div> <div class="container d-md-flex text-white"> <div class="social-links text-center text-md-end pt-3 pt-md-0 text-white"> <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>--> <!--<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>--> <!--<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>--> <!--<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>--> <!--<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>--> </div> </div> <div class="me-md-auto text-center text-md-start"> <div class="copyright text-center"> © Copyright <strong><span>atnyla</span></strong>. All Rights Reserved </div> <div class="credits text-center"> Designed by <a href="https://atnyla.com/" style="color: white">atnyla.com</a> </div> </div> </footer> <!-- Scripts --> <!-- Bootstrap core JavaScript --> <script src="https://atnyla.com/vendor/jquery/jquery.min.js"></script> <script src="https://atnyla.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="https://atnyla.com/assets/js/isotope.min.js"></script> <!--<script src=" https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script> --> <script src="https://atnyla.com/assets/js/owl-carousel.js"></script> <!--<script src="https://atnyla.com/assets/js/lightbox.js"></script>--> <script src="https://atnyla.com/assets/js/tabs.js"></script> <!--<script src="https://atnyla.com/assets/js/video.js"></script>--> <!--<script src="https://atnyla.com/assets/js/slick-slider.js"></script>--> <script src="https://atnyla.com/assets/js/custom.js"></script> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>--> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script> //according to loftblog tut $(".nav li:first").addClass("active"); var showSection = function showSection(section, isAnimate) { var direction = section.replace(/#/, ""), reqSection = $(".section").filter( '[data-section="' + direction + '"]' ), reqSectionPos = reqSection.offset().top - 0; if (isAnimate) { $("body, html").animate( { scrollTop: reqSectionPos, }, 800 ); } else { $("body, html").scrollTop(reqSectionPos); } }; var checkSection = function checkSection() { $(".section").each(function () { var $this = $(this), topEdge = $this.offset().top - 80, bottomEdge = topEdge + $this.height(), wScroll = $(window).scrollTop(); if (topEdge < wScroll && bottomEdge > wScroll) { var currentId = $this.data("section"), reqLink = $("a").filter("[href*=\\#" + currentId + "]"); reqLink .closest("li") .addClass("active") .siblings() .removeClass("active"); } }); }; $(".main-menu, .responsive-menu, .scroll-to-section").on( "click", "a", function (e) { e.preventDefault(); showSection($(this).attr("href"), true); } ); $(window).scroll(function () { checkSection(); }); </script> <script> $(document).ready(function () { $("#side-bar-toogle-btn").click(function () { $("#sidebar-list-group").toggle("slow"); }); }); </script> <script async src="https://fundingchoicesmessages.google.com/i/pub-7357847575760859?ers=1" nonce="P8qLHGFgH5IxNN3G6pLnUA"></script><script nonce="P8qLHGFgH5IxNN3G6pLnUA">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <script> // prettyPrint(); </script> </body> </html> <style> .heading_info { background-color: #f7f7f7; padding: 10px; border-radius: 20px; font-size: 16px; } </style> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script> // code for scroll data load start var page_no = 1; var tutorialPage_no = 1; var isrunning = false; // alert('show outside'); showdata(); $(window).scroll(function(){ if($(window).scrollTop()+$(window).height() > $(document).height()-600){ if(!isrunning){ // alert('show -from second call'); showdata(); } } }); function showdata(){ //alert('show - showdata'); isrunning = true; $("#loading").show(); var functionID = 'partial_fetch'; //e.preventDefault(); $.ajax({ type: "POST", url: 'ajax/blog-methods.php', data: {page:page_no, tutorialPageNo:tutorialPage_no, functionID:functionID}, beforeSend:function(){ $("#loading").show(); }, success: function(response){ var jsonData = JSON.parse(response); if(jsonData.message == "success" && jsonData.output != null){ $("#loadDataHere").append(jsonData.output); $("#loading").hide(); isrunning = false; page_no++; if(jsonData.stop_blog == "stop_blog"){ tutorialPage_no++; } }else{ $("#loading").hide(); } } }); } // code for scroll data load end </script>