Skip to content Skip to sidebar Skip to footer
Home / Javascript

Allow Certain Characters In Textbox

Post a Comment
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.

Solution 1:

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:

<scripttype="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><htmllang="en"><head><title>Title goes here</title><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scripttype="text/javascript">

    $(function() {

      // code goes here

    });

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

Solution 2:

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)
    {
        //...
    });
});

Solution 3:

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

You need to

  1. Import jQuery in <head>

  2. 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_Expressionsvar 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/114029var 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 patternif (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) {
                returntrue;
            }

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

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

Solution 4:

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

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

You may like these posts

Post a Comment for "Allow Certain Characters In Textbox"