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
– Wottensprels

2013-08-05 12:46:12 +00:00
Commented Aug 5, 2013 at 12:46 — Wottensprels
– Wottensprels, Commented Aug 5, 2013 at 12:46

Sergio · Accepted Answer · 2013-08-05 13:06:34Z

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 5, 2013 at 13:06

answered Aug 5, 2013 at 12:46

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sergio Over a year ago

@AdityaPonkshe, great!

Aditya Ponkshe Over a year ago

but the problem is value in the text input is getting selected automatically.

Sergio Over a year ago

@AdityaPonkshe, did you see the demo?

Aditya Ponkshe Over a year ago

my bad man didn't notice the link, and yes your demo is working which means i am doing something wrong

Deepak Biswal · Accepted Answer · 2013-08-05 12:49:49Z

1

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

This will work!

answered Aug 5, 2013 at 12:49

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

1 Comment

Deepak Biswal Over a year ago

See this post. I think this will help you to place cursor pointer at the end.

agha780 · Accepted Answer · 2022-10-26 10:58:34Z

0

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

answered Oct 26, 2022 at 10:58

agha780

161 bronze badge

Collectives™ on Stack Overflow

How to activate text input on a button click in javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related