How to allow only alphabet characters in text fields?

Hi, Axurians.

I’m wondering whether it is possible to make a text field to accept alphabet characters only. It is native in Axure? Can I accomplish that via JS?

Thanks in advance.

Yes, you can do this, but you have to conditionally test the input, just like you would for length of input, etc.

Here are two methods to do this, depending on how you would like things to look.
AlphaOnlyTextInput.rp (59.8 KB)

Method A tests the text entered on an input field and erases the last character entered if it is not alpha. This does have a side-effect of briefly showing the non-alpha char, which you may not like. However, this does at least provide some feedback that the non-alpha key was at least registered, so user doesn’t think their keyboard is suddenly broken. To improve usability it also shows an error message if you type a non-alpha character.

Method B prevents that brief display of non-alpha chars but is a bit more complicated. A hotspot is placed over the entire text field to prevent the field from being selected. The text field is copied and pasted directly behind the first text field (and named “textInputHidden”; although it is important not to set this to “hidden” because it won’t work that way.) Clicking on the hotspot sets the focus on textInputHidden, and if the first text field (“textInputShown”) gets focus it changes focus to textInputHidden --so that second text field should always handle the text input. It then performs the same conditional test as in Method A, and if it passes, it sets the text on textInputShown to its own text. The tradeoff is the cursor is not shown --and it is more work to set up, less obvious to maintain, etc.

You can do this in javascript as well, but methods I’ve seen basically do the same thing as Method A, so you don’t really gain anything there.