Allow only English letters without spaces or number?

Question

I need to make my input text just accept English letter without spaces or number or can copy and paste in it!

I have tried this code and it works but when I copy and paste anything outside input it accept the value:

const regex = /[A-Za-z]/;

function validate(e) {
    const chars = e.target.value.split('');
    const char = chars.pop();
    if (!regex.test(char)) {
        e.target.value = chars.join('');
    }
}

document.querySelector('#inputTextBox').addEventListener('input', validate);

How can I make it not allow to copy and paste value out of input?

feel free to use Jquery or pure JS

well your code is only looking at the last letter. It would also fail if the user moved the cursor to a different spot in the textbox and typed. — epascarello, Jul 20 '20 at 13:48
This was closed as a dupe of a question and answer both specifically dealing with the React library. Since this question has nothing to do with React it should be reopened unless there is a more appropriate dupe out there... — But those new buttons though.., Jul 28 '20 at 04:20

But those new buttons though.. · Accepted Answer · 2020-07-20T14:23:24.680

3

You can use oninput event with replace to restrict input like this:

<input type="text" oninput="this.value=this.value.replace(/[^a-z]/gi,'')">

edited Jul 20 '20 at 14:23

answered Jul 20 '20 at 14:17

But those new buttons though..

21,377
10
81
108

HARDY8118 · Answer 2 · 2020-07-21T05:14:08.887

0

You need to look at paste event.

So in order to prevent user from pasting anything which is not allowed

document.querySelector('#inputTextBox').addEventListener('paste', validate);

You may reset the value of input after validating.

edited Jul 21 '20 at 05:14

answered Jul 20 '20 at 14:03

HARDY8118

622
7
15

input handles paste. Issue was pointed out in comments, not sure what copy has to do with it. – epascarello Jul 20 '20 at 14:07

score 0 · Answer 3 · answered Jul 20 '20 at 14:04

0

The loop is not really necessary, you can use match

function validate(e) {
    e.target.value = e.target.value.match(/[A-Za-z]/g).join('');
}

document.querySelector('#inputTextBox').addEventListener('input', validate);

<input id="inputTextBox"/>

answered Jul 20 '20 at 14:04

Greedo

3,438
1
13
28

Cool but when I'm trying to write with another language is accept and I said just english – Jul 20 '20 at 14:07
1

Paste `ååååååååååååå` into the textbox with no value, you get error – epascarello Jul 20 '20 at 14:10
all the solution will allow this, you should check against an english dictionary. Also, `å` is not in `A-Za-z` regex – Greedo Jul 20 '20 at 14:10
you are also reinventing replace() – epascarello Jul 20 '20 at 14:11

Allow only English letters without spaces or number?

3 Answers3