Question

如何在单个HTML文件中完成此工作？我试图将它添加到标题中，但它不起作用。请有人教我。

＆＃13;

$("#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();
});

＆＃13;

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

＆＃13;

Answer 1

由于您已将<head>元素中的代码放在<script>标记内，因此它将在页面加载时运行，并在DOM准备好之前运行 - 即输入赢了＆＃ 39; t存在于那一点。假设您已正确引用jQuery，可以use this to wait until the DOM is loaded：

$(function() {

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

    });

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

Answer 2

将JS包含在网页中的最佳和最兼容的方法是将其保存到.js文件并将其包含在html页面中： <script type="text/javascript" src="file.js"></script>

如果你真的希望它在同一个页面中，删除src属性并将代码放在脚本标记之间，但是你可能会遇到问题，因为你有＆lt;和＆gt; JS代码中的符号，在xml中是不允许的，所以这不会是有效的xhtml。

在任何情况下，您使用的代码都使用JQuery库，因此您需要在执行任何操作之前导入它。在你的＆lt; head＆gt;中，输入：

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

确保在自己的代码之前导入它。最后，您需要确保在对其内容执行代码之前已加载页面。您可以使用$ shortcut：

在JQuery中执行此操作

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

所以你的整个页面应该是这样的：

<!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>

Answer 3

以下是如何将其放入单个HTML文件...

你需要

在<head>

等到文档加载完毕。

    $(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();
        });
    });

Answer 4

您可以在脚本标记内的正文结束标记之前添加该脚本。

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

允许文本框中的某些字符

4 个答案: