Javascript character restriction and calling a function with getElementById

Question

I have a JS function that checks and restricts certain characters typed in input forms. The code look like this:

var alphaOnly = /[sA-Za-z\söÖäÄüÜ]/g;
var alphaextraOnly = /[A-Za-z\-&/'"\öÖäÄüÜ]/g;
var alphadigitsOnly = /[sA-Za-z\söÖäÄüÜ\s1234567890]/g;
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var mailOnly = /[a-z\.@]/g;

function restrictCharacters(myfield, e, restrictionType) {
  if (!e) var e = window.event
  if (e.keyCode) code = e.keyCode;
  else if (e.which) code = e.which;
  var character = String.fromCharCode(code);
  // if they pressed esc... remove focus from field...
  if (code==27) { this.blur(); return false; }
  // ignore if they are press other keys
  // strange because code: 39 is the down key AND ' key...
  // and DEL also equals .
  if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
    if (character.match(restrictionType)) {
      return true;
    } else {
      return false;
    }
  }   
}

It works when I add onkeypress to input like this:

<input type="text" class="span4 register_input" id="firma" name="firma" onkeypress="return restrictCharacters(this, event, alphaOnly);" />

But I want to do that with getElementById in the script. I tried to add this:

window.onload = function() {
  document.getElementById("firma").onkeypress = restrictCharacters(this, event, alphaOnly);
}

But it didn't work... Help please.

You should `e.which` in preference to `e.keyCode`. That way you avoid having to deal with non-printable keypresses. http://stackoverflow.com/a/3765349/96100 — Tim Down, May 23 '13 at 10:26

Dreamwalker · Accepted Answer · 2013-05-23T12:21:48.170

2

You can't pass the arguments like that to onkeypress you would need to use a wrapper function

document.getElementById("firma").onkeypress = function (e)
    {
        return restrictCharacters(this,e,alphaOnly);
    };

jsFiddle http://jsfiddle.net/BjU2e/5/

edited May 23 '13 at 12:21

answered May 23 '13 at 10:06

Dreamwalker

3,032
4
30
60

also, I don't know where exactly shoud I put this – dzordz May 23 '13 at 10:34
this was a replacement for your current document.getElementById line – Dreamwalker May 23 '13 at 10:47
could you edit this jsfiddle update/save it so it work than link me back please? http://jsfiddle.net/BjU2e/4/ – dzordz May 23 '13 at 11:03
Updated http://jsfiddle.net/BjU2e/5/ I removed the null check as you have it in your routine – Dreamwalker May 23 '13 at 12:21
just noticed kobigurk got there before me glad its working now :) – Dreamwalker May 23 '13 at 12:23
please cut me some time, what excatly did you change in script? It seems that now is working better :) – dzordz May 23 '13 at 12:58
1

All that changed was I updated the second box id to firma2, then appended the script I wrote above to the end. The reason you need to do it this way is when placing code inside the onkeypress in html it is essentially wrapping it in a function like in the code above but you don't see that function. – Dreamwalker May 23 '13 at 13:40

kobigurk · Answer 2 · 2013-05-23T11:10:15.240

1

You are assigning to onkeypress the result of restrictCharacters(this,event,alphaOnly) instead of a function delegate. A correct version is in the following jsFiddle : http://jsfiddle.net/xL47r/1/

For future reference :

document.getElementById("firma2").onkeypress = function(e) {
    return restrictCharacters(this,e,alphaOnly); 
};

edited May 23 '13 at 11:10

answered May 23 '13 at 10:05

kobigurk

731
5
14

also, question like on Engineer's answer – dzordz May 23 '13 at 10:34
edited - it's instead of the second code block you posted. Also, I added a fix. – kobigurk May 23 '13 at 10:45
could you edit this jsfiddle update/save it so it work than link me back please? http://jsfiddle.net/BjU2e/4/ – dzordz May 23 '13 at 11:02
1

there you go. Notice that in the original fiddle, you had two divs with id "firma". I change the password one to "firma2". – kobigurk May 23 '13 at 11:10
yea i forgot to change the id of second input of firma... sorry for thath...7 – dzordz May 23 '13 at 11:14

Engineer · Answer 3 · 2013-05-23T10:13:01.950

0

document.getElementById("firma").onkeypress = function(){
     return restrictCharacters.call(this/*becauseof 'this.blur()' */, this,event,alphaOnly);
};

edited May 23 '13 at 10:13

answered May 23 '13 at 10:07

Engineer

47,849
12
88
91

after what should I insert this in my code? beacause if i put it after last } it doesn't work – dzordz May 23 '13 at 10:33
@dzordz It's straightforward. You should replace your `document.getElem...` line (within `window.onload` callback) with my answer. – Engineer May 23 '13 at 13:17

score 0 · Answer 4 · answered May 23 '13 at 10:08

0

You can get this from e.target

document.getElementById("firma").onkeypress = function(e) {
     restrictCharacters(e.target,e,alphaOnly);
}

answered May 23 '13 at 10:08

vusan

5,221
4
46
81

could you edit this jsfiddle update/save it so it work than link me back please? http://jsfiddle.net/BjU2e/4/ – dzordz May 23 '13 at 11:03

score 0 · Answer 5 · answered May 23 '13 at 10:17

0

You have wrong syntex to bind event with dom .here it is : window.onload = function () { var ab = document.getElementById("firma"); ab.setAttribute("onkeypress", "restrictCharacters(this,event, true)"); }

answered May 23 '13 at 10:17

Sudarshan Tanwar

3,537
3
24
39

could you edit this jsfiddle update/save it so it work than link me back please? http://jsfiddle.net/BjU2e/4/ – dzordz May 23 '13 at 11:03

Javascript character restriction and calling a function with getElementById

5 Answers5