Programatically put input in editing state (just like clicked on it with mouse)

Question

Assume there is a regular html input field

<input id="inputEl" type="text">

When I click on it with my mouse, it starts being 'editable' (an editing line at the beginning starts blinking) - just like every input field.

Using jQuery, I am trying to simulate that so without me clicking on it with mouse, it gets on that editing state.

I have tried:

But none seems to do the trick.

What is the proper way of achieving this?

jQuery is definitely loaded, otherwise I'd get `$()` error. I just tried StackOverflow's search input at the top. `$('.js-search-field').focus()`. It doesn't do the trick either. Open up your console and try it. jQuery exists in SO — senty, Sep 25 '17 at 22:45

P.S. · Answer 1 · 2017-09-25T22:48:49.887

1

Looks like you want to simulate click event. You can do it via jQuery using trigger(), like this:

$("#inputEl").trigger("click");

Here is an example:

$("#inputEl").trigger("click");
function wasClicked() {
  console.log('Click event was successfully simulated')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputEl" type="text" onclick="wasClicked()">

Or if you want just to focus on this input, here it is:

$("#inputEl").focus()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputEl" type="text">

edited Sep 25 '17 at 22:48

answered Sep 25 '17 at 22:45

P.S.

Open up your console, and try putting the StackOverflow's search box at the top in that editing state, just like it is clicked with mouse. `$('.js-search-field').trigger("click");` won't put it on that mode. – senty Sep 25 '17 at 22:48
Yes, this is the behaviour, but it is not working on SO's input for example. `$('.js-search-field').focus()` won't do the trick in that case – senty Sep 25 '17 at 22:54

score 1 · Answer 2 · answered Sep 25 '17 at 22:47

1

$(document).ready(function() {
   $('#inputEl').focus();
});

This is your solution. You just need to do it when the DOM is loaded. $(document).ready takes care of that.

answered Sep 25 '17 at 22:47

Bojan Ivanac

James Maa · Accepted Answer · 2017-09-25T22:58:59.577

1

.focus() would be the correct method here, the problem you are facing could be related to other issues.

At least it is working here http://jsfiddle.net/KN6rs/

The focus() function doesn't work on console because: $.focus() not working

I tried setTimeout(function() { $('.js-search-field').focus() }, 3000); works on SO

edited Sep 25 '17 at 22:58

answered Sep 25 '17 at 22:50

James Maa

Yes, I think it is related to other issues. It works in your example; I also played with it and it works in there indeed. However, can you try putting StackOverflow's search input at the top in editing state? `$('.js-search-field').focus()` won't do the trick. You can try it by opening your console; jQuery is injected in SO. – senty Sep 25 '17 at 22:56
1

@senty focus doesn't work on console because https://stackoverflow.com/questions/15859113/focus-not-working – James Maa Sep 25 '17 at 22:58

3 Answers3