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.

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.

• javascript
• html
• css

• 4 it is called focus. .focus() – Wottensprels Commented Aug 5, 2013 at 12:46

3 Answers 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

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

This will work!

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>
  );
}