Restrict characters in input field

Question

is there any option to use this code without showing the letters or characters when user type in input fields? this is the code i already tried and i want to keep it but now when i write restricted chars in input it show them for a second.I need to keep the input blank

EDIT: i dont want to change the code because this work great on tablets (other restrict character functions doesnt) . The only problem is that delay wehn you press restricted chars

Code:

function checkInput(ob){
    var invalidChars = /[^0-9]/gi
            if(invalidChars.test(ob.value)) {
                    ob.value = ob.value.replace(invalidChars,"");
          }
};

HTML:

<input class="input" maxlength="1" onChange="checkInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off"/>

also it should be type="input" not class="input" anyway. (and if you want to style it, use [type="input"]) — mahemoff, Mar 28 '14 at 09:14
@iJay OP doesn't want to hide all characters but remove some of them. — ElmoVanKielmo, Mar 28 '14 at 09:14
Same things does if i set to password and i try to use letters or other characters except numbers. + when is set to password it doesnt show me the number,it does show a bullet — user3459377, Mar 28 '14 at 09:16
The problem is that i have tryed already differet restrict characters code but this one works for tablets too.The only thing is that when i type restricted characters it show em for a second and i need to do not display them at all — user3459377, Mar 28 '14 at 09:19
`maxlength="1"` ? you just want only one character in text box? — CJ Ramki, Mar 28 '14 at 09:20
@CJRamki yes,just 1 character in input fields (6) and ONLY number.Other characters shouldnt be able to appear at all — user3459377, Mar 28 '14 at 09:21
possible duplicate of [Cancel the keydown in HTML](http://stackoverflow.com/questions/3036243/cancel-the-keydown-in-html) — mplungjan, Mar 28 '14 at 09:22
Why dont color your text the same as your background? if there is a delay they wont see it anyway. — Eddie, Mar 28 '14 at 09:24
@UglyEddie i was thinking of doing that but is nasty ..should be an answer with js/jquery code that will do that — user3459377, Mar 28 '14 at 09:25
@user3459377 in what way different. If you intercept the keydown, you will not see the char in the field — mplungjan, Mar 28 '14 at 09:35
@user3459377 Check my answer, I guess this is what you need. — dfsq, Mar 28 '14 at 09:52
Possible duplicate of [HTML5 restricting input characters](https://stackoverflow.com/questions/13607278/html5-restricting-input-characters) — Jo Liss, Feb 25 '19 at 15:15

score 15 · Accepted Answer · edited May 23 '17 at 12:18

15

you can use try this,

$('.input').keyup(function () {
    if (!this.value.match(/[0-9]/)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
});

SEE THIS FIDDLE DEMO

Updated :

You can try this Code,

$(document).ready(function() {
    $(".input").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

SOURCE

SEE UPDATED FIDDLE DEMO

UPDATED FOR ANDROID:

<EditText
android:id="@+id/editText1"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginTop="58dp"
android:layout_toRightOf="@+id/textView1"
android:maxLength="1" >
</EditText>

I think it may help you... using android:inputType="number" you can do that.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 28 '14 at 09:37

CJ Ramki

2,614
3
22
46

Same delay when i try to use restricted chars in input – user3459377 Mar 28 '14 at 09:42
How did this get two upvotes when it doesn't even work? – Niklas Mar 28 '14 at 09:42
@Niklas If you open the fiddle and type a,b,c,d ... you could see a delay there,letters are shown for a second,try to keep a letter pressed too – user3459377 Mar 28 '14 at 09:45
Yap it does.Thank you CJRamki – user3459377 Mar 28 '14 at 10:13
1 more thing,sholdnt allow . – user3459377 Mar 28 '14 at 10:19
Done,now works great.But do you know if works for android platforms too? – user3459377 Mar 28 '14 at 11:18
Is there a reason you allow the up arrow (38), but not down arrow (40)? I used `e.keyCode >= 35 && e.keyCode <= 40` for my case. – User42 Jan 14 '16 at 08:14

dfsq · Answer 2 · 2016-04-28T09:42:23.350

A combination of keypress and paste events does a trick:

var text = document.getElementById('text');
text.onkeypress = text.onpaste = checkInput;

function checkInput(e) {
    var e = e || event;
    var char = e.type == 'keypress' 
        ? String.fromCharCode(e.keyCode || e.which) 
        : (e.clipboardData || window.clipboardData).getData('Text');
    if (/[^\d]/gi.test(char)) {
        return false;
    }
}

<input class="input" maxlength="10" id="text" type="text" autocomplete="off" />

This code prevents from typing or pasting anything but a number. Also no blinking and invalid characters don't show up.

Works in IE7+.

Demo: http://jsfiddle.net/VgtTc/3/

score 2 · Answer 3 · answered Mar 28 '14 at 09:28

2

Here's a little hack you could try: DEMO

What it does is that it colors every input text white and then changes it back to black if it suits your requirements. If you could live with the bit of lag that occurs when you enter a valid character.

function checkInput(ob) {
    var invalidChars = /[^0-9]/gi
    if (invalidChars.test(ob.value)) {
        ob.value = ob.value.replace(invalidChars, "");
    }
    else {
        document.getElementById('yourinput').style.color = '#000';
    }
};

function hideInput(ob) {
    document.getElementById('yourinput').style.color = '#FFF';
};

html

<input id="yourinput" class="input" maxlength="1" onKeydown="hideInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

css

input {color:#FFF;}

answered Mar 28 '14 at 09:28

Niklas

12,665
22
76
117

Aint any way of doing that without useing css? Its just a delay when you press restricted characters that i dont want to be displayed at all – user3459377 Mar 28 '14 at 09:32
Ur answer is good,as you said its a little hack but i still wonder how can i use this code without delay – user3459377 Mar 28 '14 at 09:32
1

Yeah, I'm trying some other things but I can't seem to get rid of the lag. – Niklas Mar 28 '14 at 09:43

score 2 · Answer 4 · answered May 11 '17 at 15:29

<input id="testInput"></input>

<script>
testInput.onchange = testInput.oninput = restrict;

function restrict() {
    testInput.value = testInput.value.replace(/[^a-z]/g, "");
}
</script>

I came up with something slightly different. oninput instead of onkeyup/onkeydown, and onchange instead of onpaste.

score 1 · Answer 5 · edited Mar 28 '14 at 10:09

1

check this code,

$('.input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

edited Mar 28 '14 at 10:09

CJ Ramki

2,614
3
22
46

answered Mar 28 '14 at 09:26

Ashwani Panwar

2,459
3
33
53

score 0 · Answer 6 · answered May 14 '21 at 18:30

I restrict invalid characters on both keypress and paste events like:

<input type="text" onkeydown="validateKey(event)" onpaste="validatePaste(this, event)">

And define functions to handle these events inside tab or a separate javascript file:

<script>
function validateKey(e) {
  switch(e.keyCode) {
    case 8,9,13,37,39:
      break;
    default:
      var regex = /[a-z .'-]/gi;
      var key = e.key;
      if(!regex.test(key)) {
        e.preventDefault();
        return false;
      }
      break;
  }
}
function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}
</script>

Restrict characters in input field

6 Answers6

Demo: http://jsfiddle.net/VgtTc/3/

Linked