focus on element and then cause a keydown or keyup space event

Question

I currently working on Chrome lastest version. I have the following simple html code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<html>
<input id="inputfield" type = "textfield">
</html>
</body>
</html>

then using javascript i am first trying to set the text of the field which is ok, then focus it and then cause a space key press.

textbox = document.getElementById("inputfield")
textbox.value = "word";

  var evt = document.createEvent("KeyboardEvent");
evt.initKeyboardEvent(
                   "keyup",
                    true, 
                    true, 
                    window, 
                    false, 
                    false, 
                    false, 
                    false,
                    32, 
                    0 
);

textbox.focus();
textbox.dispatchEvent(evt);

but there is no focus happening and the last line just returns true; I am executing the code through the console of chrome i dont know if that would make a difference.

Thank you

http://jsfiddle.net/Y674s/1/ works fine here. In latest google chrome. But remember that you simple fire an event, it will not change value of an input. — Viktor S., Jan 30 '13 at 15:18
it just wont execute on mine, could it because i am running it through the console? — czioutas, Jan 30 '13 at 15:21
i am getting a "TypeError: evt.initKeyboardEvent is not a function" on firefox 12.0 — czioutas, Jan 30 '13 at 15:22
also i put the "onkeyup="alert('keyup event')" now and the alert does show but shouldnt there be a space if we are pressing number 32? — czioutas, Jan 30 '13 at 15:25

score 0 · Answer 1 · answered Jan 30 '13 at 15:23

0

Your markup is not correct, html tags don't appear in the body.

It should be this:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="inputfield" type = "textfield">
    </body>
</html>

Then as @FAngel said, you can't change the value of the input field in this way, you have to set it's text to whatever value you want.

answered Jan 30 '13 at 15:23

Ryan

5,644
3
38
66

corrected the html but still nothing changed as i commented above, the alert from the event is triggered but shouldnt there be a space? and i have no problem setting the value of the field like that. – czioutas Jan 30 '13 at 15:28
also i guess html is smart enough to correct my double html issue because it works in @Fangel s example – czioutas Jan 30 '13 at 15:29
what i am thinking is that it wont work because i am executing it through the console window – czioutas Jan 30 '13 at 15:30
@drakoumelitos setting the value of the text isn't the issue, what me and @FAngel are saying is that, your creating a `keyevent` but it's being dispatched to the `window`, you can't dispatch an `event` to an `element`. So triggering an `event` like this will not change the value of your input. – Ryan Jan 30 '13 at 15:32
@drakoumelitos and anything will work though the console window, I use the console all the time, it is by far the best thing about debugging javascript in Chrome. – Ryan Jan 30 '13 at 15:33
if it wont work then how does it work in jsfiddle? and also the documentation on mozilla about DOM references says: element.dispatchEvent(event) element is the target of the event. https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent @ryan – czioutas Jan 30 '13 at 15:36
@drakoumelitos It's not working in jsfiddle, if you look at the jsfid there is no space being appended to the value inside the text area. And the element is the target, but all events bubble up though the dom to the window. – Ryan Jan 30 '13 at 15:38
the space yes i thought you were talking about the "word" , but thats what i am saying the problem, would it make a difference if we change the bubble of the specific event to false? – czioutas Jan 30 '13 at 15:41

Viktor S. · Answer 2 · 2013-01-30T15:56:22.743

0

You simply fire an event. But it will not change a value, "word" will not became "word ". Not sure why it does not work from console, but it may be that you are missing something important there. Possibly that is because of var (I've noticed that problem few times). Try to change var evt = document.createEvent("KeyboardEvent"); to simply evt = document.createEvent("KeyboardEvent");.

i am getting a "TypeError: evt.initKeyboardEvent is not a function" on firefox 12.0

That is because in firefox that function is called initKeyEvent. Here is a code which supports firefox and google chrome:

textbox = document.getElementById("inputfield")
textbox.value = "word";

  var evt = document.createEvent("KeyboardEvent");

  var keyEventFunction = (evt.initKeyboardEvent ? "initKeyboardEvent" : "initKeyEvent");

evt[keyEventFunction](
                   "keyup",
                    true, 
                    true, 
                    window, 
                    false, 
                    false, 
                    false, 
                    false,
                    32, 
                    0 
);

textbox.focus();
textbox.dispatchEvent(evt);

and demo: http://jsfiddle.net/Y674s/2/

UPD:

When you run your code in console, focus is set to your field, but you just can see that. To see that, modify your input HTML like this:

<input id="inputfield" type = "textfield" onblur="alert('focus was in textfield')">

onblur event happens only in case if some field were focused, but later focus were moved somewhere else. Now, run your code in console and and click somewhere in page body. You will see that alert appears. If you simply open your page and do not run that code - aler will not appear.

edited Jan 30 '13 at 15:56

answered Jan 30 '13 at 15:34

Viktor S.

12,736
1
27
52

run it on chrome still no difference the word gets inserted but no focus and no space but the event is being recorded (i see alert). it am looking into this for 3 hours and have tried many different approaches. there must be a difference in jsfiddle and the actuall chrome – czioutas Jan 30 '13 at 15:43
Oh! You will NOT get a space added like that. You need to do textbox.value += " "; to get a space after word. And there is NO difference between fiddle and chrome, because jsfiddle is a simple website that allows you to post your own HTML/JS/CSS, execute it and share with other people. – Viktor S. Jan 30 '13 at 15:47
The only strange thing is focus. But are you still running that code from console? – Viktor S. Jan 30 '13 at 15:48
I mainly need to register the space key event and as a result get the space i dont want it as a string – czioutas Jan 30 '13 at 15:53
I am trying to automate a process which understands you need to move on by pressing space at the end of a command so i simplified it to be a textbox where you insert a word and cause the space event @FAngel – czioutas Jan 30 '13 at 15:56
Where do you want to get a space? What are you going to do with it later? Are you saying that your goal is to prevent spaces being entered into that field or what? – Viktor S. Jan 30 '13 at 15:58
I am away from my comp atm but if ur idea about the focus works then why isnt it being yellow around? But my main prob is eegistering the space event – czioutas Jan 30 '13 at 16:01
No thw space keypress works as a "i am finished move on" function. The program i am building this for is very specific but thw space at the end would work as an enter or as a "done". There is a keylistener using jquery that says if event.keycode = 32 then move on – czioutas Jan 30 '13 at 16:03
If you simply want to do some action when space is pressed, than you need to add event listener. Details [here](http://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser). And worse approach, but simpler to implement here: http://jsfiddle.net/Y674s/4/. Just try to type a space in that field. – Viktor S. Jan 30 '13 at 16:06
Maybe you simply fire wrong event? what even do you listen with jQuery? – Viktor S. Jan 30 '13 at 16:07
At my current example i havent added the listener but at the real one it works as rhe user types and if he types/presses the spacebar the event is fires i am looking at the event.which which ia the keycode but this is not the point the issue here is tha although the alert is poped up there is no space at the textbox – czioutas Jan 30 '13 at 16:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23645/discussion-between-drakoumelitos-and-fangel) – czioutas Jan 30 '13 at 16:12

focus on element and then cause a keydown or keyup space event

2 Answers2