允许在文本框中使用某些字符

Allow certain characters in textbox

本文关键字：字符 文本      更新时间：2023-09-26

如何在单个HTML文件中实现此功能？我试着把它添加到标题中，但它不起作用。请有人教我。

$("#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...">

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

如果您真的希望它在同一页中，请删除src属性并将代码放在脚本标记之间，但您可能会遇到问题，因为您将使用<和>符号，这在xml中是不允许的，所以这将不是有效的xhtml。

在任何情况下，您已经使用了JQuery库，因此您需要在执行任何操作之前导入它。在您的<head>，看跌期权：

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

请确保在您自己的代码之前导入它。最后，在对页面内容执行代码之前，您需要确保页面已加载。您可以在JQuery中使用$shortcution:来完成此操作

$(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>

由于您已将<head>元素中的代码放入<script>标记中，因此它将在页面加载时运行，并且在DOM准备就绪之前（即，此时不存在输入）。假设您已经正确引用了jQuery，您可以使用它来等待DOM加载：

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

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

你需要

  1. 在<head> 中导入jQuery

  2. 等待文档加载完成。

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

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

<script type="text/javascript">
Your script goes here.
</script>
</body>
相关文章：