How to activate text input on a button click in javascript

Question

I am trying to activate a text input using a button. My function is like this.

function showHide4()
{
 document.getElementById('snack').readOnly=false;
 document.getElementById('snack').style.backgroundColor"#ffffff";   
}

This function makes text input writable and changes background to white, but it gets activated only after I click on it.

Note:- My idea of activated text input is cursor(|) blinking in it. maybe activated is not a correct word for it but I don't know what else to call it.

EDIT:- I tried focus(), Problem in using focus() is Default value in my text input is getting selected automatically, which is not what I want, I want to put cursor(|) after that value.

it is called focus. .focus() – Wottensprels Aug 05 '13 at 12:46 — Wottensprels, Aug 05 '13 at 12:46

Sergio · Accepted Answer · 2013-08-05T13:06:34.457

3

Try this, I think focus() is what you are looking for:

function showHide4() {
    var el = document.getElementById('snack');
    el.readOnly = false;
    el.style.backgroundColor = "#ffffff";
    el.focus();
    el.value = el.value;
};

To do what you want you need to cheat a bit, just reset (set again) the value of the input and it will work as you want.

DEMO HERE

edited Aug 05 '13 at 13:06

answered Aug 05 '13 at 12:46

Sergio

27,998
10
81
130

@AdityaPonkshe, great! – Sergio Aug 05 '13 at 12:49
but the problem is value in the text input is getting selected automatically. – Aditya Ponkshe Aug 05 '13 at 12:51
@AdityaPonkshe, did you see the demo? – Sergio Aug 05 '13 at 13:07
my bad man didn't notice the link, and yes your demo is working which means i am doing something wrong – Aditya Ponkshe Aug 05 '13 at 13:10

score 0 · Answer 2 · answered Aug 05 '13 at 12:49

0

function showHide4()
{
 document.getElementById('snack').readOnly = false;
 document.getElementById('snack').style.backgroundColor = "#ffffff";  
 document.getElementById('snack').focus(); 
}

This will work!

answered Aug 05 '13 at 12:49

Deepak Biswal

4,190
2
18
37

See this [post](http://stackoverflow.com/questions/6003300/how-to-place-cursor-at-end-of-text-in-textarea-when-tabbed-into). I think this will help you to place cursor pointer at the end. – Deepak Biswal Aug 05 '13 at 13:00

How to activate text input on a button click in javascript

2 Answers2