Click here to Skip to main content
14,268,193 members

How to Select All Text in a TextBox on focus?

Rate this:
4.83 (3 votes)
Please Sign up or sign in to vote.
4.83 (3 votes)
2 Sep 2015CPOL
How to select all text in a textbox on focus

Select all Text in Safari

Select all Text in Safari

Introduction

This is a small tip, yet very useful when you want to select all text inside a TextBox.

Background

This was a requirement for which I researched a lot and tested on multiple browsers and devices. Let me share the problem and solution below.

Problem

When profile page is shown for a user, the password fields are also populated. The characters in a password field are masked (shown as asterisks or circles). So, typical user experience would be to select all text when you click or focus into these fields, as user can’t see the password, he/she will definitely change the whole password. Therefore, the problem is to select all the text inside the password fields.

Solution

We are going to use jQuery for this task. Solution is not so straight forward as it seems. So, the first thing that comes into mind is to handle the focus event. Yes, of course, we will use that. So, the code would look like below…

$('#txtPassword').on('focus', function () {
    this.select();
});

But this is not a cross browser solution and will fail in Safari.

So, What Is Cross Browser?

Very tricky actually. We need to specify how much text we need to select. We can specify that using the selectionStart and selectionEnd properties.

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});

Now, one last thing. We need to prevent mouseup event, because that is fired automatically after focus, which deselects all the text.

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});
$("#txtPassword").on('mouseup', function (e) {
    e.preventDefault();
});

Full Demo

[Demo] Select All Text in a TextBox on focus

If you have any queries, do visit my blog and drop me a Contact Tadit Dash request.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles


jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
  7. </

Comments and Discussions

 
Questionnot working in edge Pin
Member 116913218-Sep-15 9:23
professionalMember 116913218-Sep-15 9:23 
AnswerRe: not working in edge Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)10-Sep-15 18:44
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)10-Sep-15 18:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 2 Sep 2015

Stats

10.8K views
4 bookmarked