Allow certain characters in textbox

Question

How can I make this work in a single HTML file? I have tried to add it to the header and it doesn't work. Please can someone teach me.

$("#mytextbox").on("keypress", function(event) {

    // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space)
    // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions
    var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g;
   
    // Retrieving the key from the char code passed in event.which
    // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029
    var key = String.fromCharCode(event.which);
    
    //alert(event.keyCode);
    
    // For the keyCodes, look here: http://stackoverflow.com/a/3781360/114029
    // keyCode == 8  is backspace
    // keyCode == 37 is left arrow
    // keyCode == 39 is right arrow
    // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) {
        return true;
    }

    // If we got this far, just return false because a disallowed key was typed.
    return false;
});

$('#mytextbox').on("paste",function(e)
{
    e.preventDefault();
});

<input id="mytextbox" style="width:300px" placeholder="Only English letters are allowed here...">

That is what I cannot do. I tried putting at the end. That's the only thing i can do. — bobos, Apr 09 '15 at 15:57
@Lifestohack Whilst browsers may handle this, it's technically invalid at that location (ie within ``) and if taking this approach should be placed just before the ``. — James Thorpe, Apr 09 '15 at 16:11
@JamesThorpe that is what I mean, put the code inside script tag after closing body tag. look here. http://stackoverflow.com/questions/29543303/assist-me-couple-this-together/29543570#29543570 — Lifestohack, Apr 09 '15 at 16:13

score 0 · Answer 1 · answered Apr 09 '15 at 16:02

Since you've put the code in your <head> element inside a <script> tag, it will run as the page is loading, and before the DOM is ready - ie the input won't exist at that point. Assuming you've got jQuery referenced correctly, you can use this to wait until the DOM is loaded:

$(function() {

    $("#mytextbox").on("keypress", function(event) {
        //...       

    });

    $('#mytextbox').on("paste",function(e)
    {
        //...
    });
});

score 0 · Accepted Answer · answered Apr 09 '15 at 16:04

The best and most compatible way to include JS to a web page is to save it to a .js file and to include it in the html page with:
<script type="text/javascript" src="file.js"></script>

If you really want it to be in the same page, remove the src property and put the code between the script tags, but you might have problems since you'll have the < and > symbols in your JS code, which aren't allowed in xml, so this won't be valid xhtml.

In any case, this code you have uses the JQuery library, so you'll need to import it before you do anything. In your <head>, put:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Make sure you import it before your own code. Finally, you need to make sure the page has loaded before executing code on its content. You can do that in JQuery with the $ shortcut:

$(function() {
    // code goes here
});

So your whole page should look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title goes here</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">

    $(function() {

      // code goes here

    });

  </script>
</head>
<body>
  <!-- content of the page goes here -->
</body>
</html>

Seyong Cho · Answer 3 · 2015-04-09T16:11:40.187

Here's how you can put it in Single HTML file...

You need to

Import jQuery in <head>

Wait until document finished loading.

    $(document).ready(function(){
        $("#mytextbox").on("keypress", function(event) {

            // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space)
            // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions
            var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g;

            // Retrieving the key from the char code passed in event.which
            // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029
            var key = String.fromCharCode(event.which);

            //alert(event.keyCode);

            // For the keyCodes, look here: http://stackoverflow.com/a/3781360/114029
            // keyCode == 8  is backspace
            // keyCode == 37 is left arrow
            // keyCode == 39 is right arrow
            // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern
            if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) {
                return true;
            }

            // If we got this far, just return false because a disallowed key was typed.
            return false;
        });

        $('#mytextbox').on("paste",function(e)
        {
            e.preventDefault();
        });
    });

Lifestohack · Answer 4 · 2015-04-09T16:19:05.260

0

You can add that script just before body closing tag inside script tag.

<script type="text/javascript">
Your script goes here.
</script>
</body>

edited Apr 09 '15 at 16:19

answered Apr 09 '15 at 16:06

Lifestohack

377
4
19

Allow certain characters in textbox

4 Answers4

Linked