Select All Text by Clicking on Text Field or Textarea Box

Rumman Ansari   2022-09-25   Developer   web development > Javascript   243 Share

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: &nbsp;  <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-532413243-manners-and-dua-towards-allah-ta-ala-islam-and-muhammad-pbuh.png" 
                            class="card-img-top"
                            alt="Manners"
                          />                           <div class="card-body">
                            <h5 class="card-title">আল্লাহ তা'আলা, ইসলাম ও মুহাম্মাদ (সাল্লাল্লাহু আলাইহি ওয়া সাল্লাম) এর প্রতি আদব এবং দু’আ</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="manners-and-du-a-towards-allah-ta-ala-islam-and-muhammad-pbuh" 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/275291092_translation1.png" 
                            class="card-img-top"
                            alt="Translation Bengali to English - Post 1"
                          />                           <div class="card-body">
                            <h5 class="card-title">Translation Bengali to English - Post 1</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="translation-bengali-to-english---post-1" 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-340875152-how-can-i-learn-data-structure.png" 
                            class="card-img-top"
                            alt="How can I learn data structure to be a good programmer 10 steps"
                          />                           <div class="card-body">
                            <h5 class="card-title">How can I learn data structure to be a good programmer 10 steps</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="how-can-i-learn-data-structure-to-be-a-good-programmer-10-steps" 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-982667887-thumbnail-Laziness-is-the-cause-of-misery.png" 
                            class="card-img-top"
                            alt=""
                          />                           <div class="card-body">
                            <h5 class="card-title">অলসতা হলো দুর্দশার কারণ</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="laziness-is-the-cause-of-misery" 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/15065740_happy-mothers-day.png" 
                            class="card-img-top"
                            alt="Happy Mothers Day | Respect of Mother"
                          />                           <div class="card-body">
                            <h5 class="card-title">Happy Mothers Day | মা দিবস | Respect of Mother</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="happy-mothers-day-respect-of-mother" 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-629559729-how-to-wrap-or-surround-highlighted-text-with-an-element.png" 
                            class="card-img-top"
                            alt="How To Wrap or Surround Highlighted Text With An Element"
                          />                           <div class="card-body">
                            <h5 class="card-title">How To Wrap or Surround Highlighted Text With An Element</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="how-to-wrap-or-surround-highlighted-text-with-an-element" 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/429956973_serverside-validation-on-textbox-and-dropdown-list.png" 
                            class="card-img-top"
                            alt="Validation control on serverside using dropdown and textbox .asp c# code"
                          />                           <div class="card-body">
                            <h5 class="card-title">Validation control on serverside using dropdown and textbox .asp c# code</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="validation-control-on-serverside-using-dropdown-and-textbox-asp-c-code" 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-194433199-views-decreasing.png" 
                            class="card-img-top"
                            alt="Why are my websites views decreasing?"
                          />                           <div class="card-body">
                            <h5 class="card-title">Why are my website's views decreasing?</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="why-are-my-websites-views-decreasing" 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/659267344_Blog7-translation-bengali-to-english.png" 
                            class="card-img-top"
                            alt="Translation Bengali to English - Post 7"
                          />                           <div class="card-body">
                            <h5 class="card-title">Translation Bengali to English - Post 7</h5>
                            <p class="card-text">
                                                         </p>
                            <div class="main-button-gradient">
                              <a href="translation-bengali-to-english---post-7" 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>