CODEWITHSUNDEEP
javascriptinputfocus
Fortega
Fortega

Reputation: 19702

Javascript: select the text in the currently focussed input field

I would like to select the text of the input field which currently has focus, so when the user starts typing, the text which is currently in the input field is gone. Can I do this with javascript (or jquery)?

In case the field which currently has focus is not an input field, nothing has to happen.

thanks!

EDIT: To all the answerers: you all misunderstood (so probably my question was not clear). I don't want to select the text on the moment the input field gets the focus. I would like to have a javascript function which selects the text of the input field which has the focus at that moment.

Upvotes: 0

Views: 229

Answers (4)

Jason Brumwell
Jason Brumwell

Reputation: 3550

Sorry I misunderstood what you were looking for I think that I have a better understanding of it now. Does this do more of what you were looking to acheive?

//If not using 1.7 for jquery you can use bind
$('input, textarea').on({
    focusin: function(){
        $(this).addClass("focused");
    },
    focusout: function(){
        $(this).removeClass("focused");
    }
});

function highlightText()
{
    var focused = $('input.focused,textarea.focused');

    if (focused.size()) {
        focused.get(0).select();   
    }
}

http://jsfiddle.net/GXFpR/1/

Upvotes: 4

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can try something like this? http://jsfiddle.net/z55UZ/

 $("input, textarea").focus(
     function()
     {
         this.select();
     }
  )

EDIT:

here is an updated fiddle: http://jsfiddle.net/IrvinDominin/z55UZ/2/

In the example is selected the last focused element; but if you look at the code the var childInputHasFocus and whoHasFocus are never setted to false...when you want to stop the selecting feature?

Where you wanna call the function? Because the click event sets the active/focused element as is caller.

Upvotes: 0

david
david

Reputation: 4278

You can check with onfocus and then use this.select() as inline

  <input name="" type="text" value="test test" onfocus="this.select()" />

UPDATE: a more universal approach, will add focus to inputs of the text type also input text's that are not readonly

  window.onload = setFocus();

or call beneth the last form input field

  setFocus();

main

setFocus = function(){
  var i = [];
  i = document.getElementsByTagName("input");
    for(var t=0; t < i.length; t++){
       if(i.item(t).type == "text" && i.item(t).readOnly == false){
          i.item(t).onfocus = function (){this.select()};
     }
 }
 }

Upvotes: 0

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

This should work:

<html>
<head>
</head>
<body>

<input type="text" id="theTextBox" onfocus="selectText()" value="some value"></input>
<script type="text/javascript">
function selectText() {
    document.getElementById("theTextBox").select();
};
</script>
</body>
</html>

Upvotes: 0

Related Questions