Using event.which to verify if the user pressed the spacebar doesn't work in Firefox

Question

I want a script to verify if the key pressed is 'spacebar', keycode 32. I noticed that IE uses other function names.

I tried a lot of solutions found here and this:

event = event || window.event // IE does not pass event to the function
if(event == window.event){
    code = event.keyCode;
}else{
    code = event.which;
} 
if(code == '32') {}

But it still didn't work in Firefox.

I think I'm calling the function wrongly in Firefox. Look at the entire script:

<textarea onkeydown="predicao(this);" cols="40" rows="10" id="test" onfocus="this.focus()"></textarea>
<input id="example" style="display: none;" onkeydown="javascript: insert(this);"/>

<script language="Javascript">
<!--

function predicao(objeto){
    comprimento = objeto.value.length;
    var antipenultimo = comprimento - 4;
    var input = objeto.value.substring(antipenultimo,comprimento);
    var output = "";
    for(i=0; i<input.length; ++i){
        if(output != "") output += ", ";
        output += input.charCodeAt(i);
    }
    if (output == "91, 91, 103, 32"){

        var preditor = document.getElementById('example');
        preditor.value = '';
        preditor.style.display = 'block';
        preditor.focus();
        preditor.select();
    }  
}
function insert(objeto){
event = event.which || window.event // IE does not pass event to the function
if(event == window.event){
    code = event.keyCode;
}else{
    code = event.charCode;
} 
    if(keynum == '32') {
        var texto = document.getElementById('test').value;
        texto += objeto.value+']]';
        $('#test').focus();
        document.getElementById('test').value = texto;
        objeto.style.display = 'none';
    }
}
$(document).ready(function(){
    var data = "Ab Aco Ado Ala Mano Cata Ca Obo Olo Po Poq".split(" ");
$("#example").autocomplete(data);});
</script>

What I'm trying to do is - (I don't know the name) - a Prediction Help Inputter inside a textarea. It uses jQuery autocomplete. When the user types '[[g ' inside textarea (id=test), a input with autocomplete is opened (id=example), so it search in 'data'. When the user find the desired data, he must press spacebar to insert the data into the textarea, closing with ']]' But it doesn't work in Firefox.

(And yes, I'm using JavaScript and jQuery to same elements in a totally wrong way because I'm not too good at this, I'll try to correct it after Firefox works.)

show the complete function. You MUST pass event as function whatever(event) for fx to work - also look here http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed — mplungjan, Aug 13 '11 at 15:05
No need for the javascript: either onkeydown="javascript: << — mplungjan, Aug 13 '11 at 17:22

score 5 · Accepted Answer · 2011-08-13T16:12:32.437

5

EDIT

HMTL:

<textarea onkeydown="predicao(this);" cols="40" rows="10" id="test" onfocus="this.focus()"></textarea>
<input id="example" style="display: none;" onkeydown="insert(this, event);"/>

JS:

function predicao(objeto){
    var comprimento = objeto.value.length;
    var antipenultimo = comprimento - 4;
    var input = objeto.value.substring(antipenultimo,comprimento);
    var output = "";
    for(var i=0; i<input.length; ++i){
        if(output != "") output += ", ";
        output += input.charCodeAt(i);
    }
    if (output == "91, 91, 103, 32"){
        var preditor = document.getElementById('example');
        preditor.value = '';
        preditor.style.display = 'block';
        preditor.focus();
        preditor.select();
    }
}
function insert(objeto, evt){
    var e = evt || event;
    var code = e.keyCode || e.which;
    if(code == '32') {
        var texto = document.getElementById('test').value;
        texto += objeto.value+']]';
        $('#test').focus();
        document.getElementById('test').value = texto;
        objeto.style.display = 'none';
    }
}
$(document).ready(function(){
    var data = "Ab Aco Ado Ala Mano Cata Ca Obo Olo Po Poq".split(" ");
$("#example").autocomplete(data);});

I used here what Alexander Kahoun and pimvdb have posted.

edited Aug 13 '11 at 16:12

answered Aug 13 '11 at 15:01

It works in Chrome, but I think I'm calling it wrong in FF. This all my code: – Leo Aug 13 '11 at 15:27
2

It might be a good idea to declare `code` with `var` though. You can also do `var code = e.keyCode || e.which`. :) – pimvdb Aug 13 '11 at 15:31
@user893149 - It works for me on Opera 11.50, Firefox 5 and Google Chrome 13. Your code has been cut off (in your comment). – Aug 13 '11 at 15:33
2

You need a var on e and code. Without them you are making them global and they can interfere with other scripts. – Alexander Kahoun Aug 13 '11 at 15:53
I was insertin 'event' inside the function, I think it was that wrong – Leo Aug 13 '11 at 16:19
@Leo - Other problems was this line `if(keynum == '32')` , no `event` here `onkeydown="insert(this);"` , no semicolon at the end of one line... – Aug 13 '11 at 16:23
lol, I thought I could accept all! I tryed all and all worked. I would like to be grateful to all of you! Thanks for semicolon tip too! – Leo Aug 13 '11 at 16:43
You can accept only one answer but you can upvote every answer. Just click o arrow up on the top left corner of answer. For accept someone will get 15 points and for upvote 10 points. – Aug 13 '11 at 17:23

Alexander Kahoun · Answer 2 · 2011-08-13T16:12:10.877

3

I've never had any problems with the following and I've used it in IE6 through IE9, Firefox 3.5-5 and Chrome from at least 9-13

function captureSpace (evt) {
    var e = evt || event;
    var code = e.keyCode || e.which;
    if (code === 32) {
        // Do your thing...
    }
}

This uses a logical OR to basically say if evt is a falsy value then use the window.event

var e = evt || event;

This uses a logical OR to assign the code for the key pressed in the same way

var code = e.keyCode || e.which;

This gives you a true or false value if the code is exactly equal to the integer value of 32

(code === 32)

I also suggest that you assign this to the key UP event.

edited Aug 13 '11 at 16:12

answered Aug 13 '11 at 15:21

Alexander Kahoun

2,458
24
36

`var e = evt || event;` to `var e = evt || window.event;` ? – Aug 13 '11 at 15:28
event is shorthand for window.event. Try out this jsfiddle in IE to see: http://jsfiddle.net/arcond/yVXy4/ – Alexander Kahoun Aug 13 '11 at 15:41
this function have no name, how i should call this? – Leo Aug 13 '11 at 16:10

score 0 · Answer 3 · answered Aug 13 '11 at 15:01

0

In principle the way you do it should work. Check this out:

<html>
<head>
<script type="text/javascript">
function check(e){
 var keynum
 if(window.event)
 {
  keynum = e.keyCode
 }
 else if(e.which)
 {
  keynum = e.which
 }
 if(keynum=='32')
 {
  alert(keynum);}
  }
</script>
</head>
<form>
<input type="text" onkeypress="check(event)" />
</form>
</body>
</html>

It seems that your lack of response is context dependent.

answered Aug 13 '11 at 15:01

kwicher

2,092
1
19
28

Several problems there. `if(window.event) { keynum = event.keyCode }` and `if (keynum==32)` – mplungjan Aug 13 '11 at 15:03
I think you are right, i think I calling the function wrongly. – Leo Aug 13 '11 at 15:24

Srikanth Venkatesh · Answer 4 · 2011-08-13T15:27:38.730

To display unicode of key pressed

         <script type="text/javascript">
                function displayunicode(e){
                                            var unicode=e.keyCode? e.keyCode : e.charCode;
                                            alert(unicode);
                                          }
        </script>
                <form>
                      <input type="text" size="2" maxlength="1" onkeyup="displayunicode(event); this.select()" />
                </form>

Determining which key was pressed

Using event.which to verify if the user pressed the spacebar doesn't work in Firefox

4 Answers4

Linked