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

4

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

28,539
11
85
132

@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 1 · Answer 2 · answered Aug 05 '13 at 12:49

1

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,280
2
20
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

score 0 · Answer 3 · answered Oct 26 '22 at 10:58

How to activate text input on a button click in React

This is how i did it using react.

export default function App() {
  function showHide4() {
    var el = document.getElementById("snack");
    el.style.backgroundColor = "#fdd";
    el.focus();
  }

  return (
    <div className="App">
      <input type="text" id="other" value="100" readonly="true" />
      <input type="text" id="snack" />

      <button type="button" onClick={showHide4} id="button">
        Click
      </button>
    </div>
  );
}

How to activate text input on a button click in javascript

3 Answers3