Javascript 将输入限制为一组字符，同时显示这些字符

我在一些“用户名”字段中看到，您在其中键入用户名，然后在其下方，在类似span的位置，它会将其附加到url。就像我在底部的StackOverflow中输入的一样

我只想显示列表中允许的字符，忽略任何不在该列表中的字符输入

我对JS真的很陌生。在本例中，我使用Jquery，并且对一些部分进行了某种处理，而其他部分我没有，或者我还没有实现

愿望： 输入表单字段只接受列表中的字符，其他字符将被忽略。 获取输入的新键，并将其附加到元素

以下是我到目前为止的混乱情况：

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
      $('#cart-name').keyup(function(e) {
           var entered = $('#cart-name').val();
           entered     = entered.toUpperCase();

           var allowed = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_';

           // fromCharCode always returns uppercase?
           var entered_char = String.fromCharCode(e.which);
           console.log('You entered: ' + entered_char);

           var pos = allowed.indexOf(entered_char);
           console.log('position is: ' + pos);


           if (pos <= 0) {
                console.log('does not contain');
           } else {
                console.log('contains');
           }

           $('#live').text(entered);
           console.log(entered);
      });
 });
</script>

$（文档）.ready（函数（）{
$（“#购物车名称”）.keyup（函数（e）{
输入的变量=$（“#购物车名称”）.val（）；
entered=entered.toUpperCase（）；
允许的风险值='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-'；
//fromCharCode总是返回大写？
var输入_char=String.fromCharCode（e.which）；
log（'您输入：'+输入字符）；
var pos=允许的.indexOf（输入字符）；
console.log（'位置为：'+位置）；
如果（pos为什么不使用常规表达式来替换非字母数字字符

entered = entered.replace(/[^a-zA-Z 0-9]+/g,'');

查看您的评论，您对不同的关键事件有些困惑：

keyup
（和
keydown
）告诉您按下了哪个物理键，而
keypress
会告诉您键入了哪个字符-这就是为什么您总是从charcode

中获取大写字母的原因

我使用类似这样的方法来整理URL：

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#cart-name').keypress(function(e) {
      var entered = $('#cart-name').val();

      // Regular Express to perform match on all alphanumeric characters,
      // and - and _
      var matchPattern = /[\w/_/-]/g;

      var entered_char = String.fromCharCode(e.which);
      console.log('You entered: ' + entered_char);

      if (entered_char.match(matchPattern)) {
        $('#live').text(entered + entered_char);
      }
      else if (enteredKey == " ") {
        // Replace spaces with hyphens for SEO
        $('#live').text(entered + "-");
      }    

    });
 });
</script>

$（文档）.ready（函数（）{
$（“#购物车名称”）。按键（功能（e）{
输入的变量=$（“#购物车名称”）.val（）；
//Regular Express对所有字母数字字符执行匹配，
//和-和_
var matchPattern=/[\w//-]/g；
var输入_char=String.fromCharCode（e.which）；
log（'您输入：'+输入字符）；
如果（输入字符匹配（匹配模式））{
$（'#live'）.text（输入+输入字符）；
}
否则如果（输入的键==“”）{
//用连字符替换空格以进行搜索引擎优化
$（'#live'）。文本（输入+“-”；
}    
});
});

我会看到你的

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#cart-name').keypress(function(e) {
      var entered = $('#cart-name').val();

      // Regular Express to perform match on all alphanumeric characters,
      // and - and _
      var matchPattern = /[\w/_/-]/g;

      var entered_char = String.fromCharCode(e.which);
      console.log('You entered: ' + entered_char);

      if (entered_char.match(matchPattern)) {
        $('#live').text(entered + entered_char);
      }
      else if (enteredKey == " ") {
        // Replace spaces with hyphens for SEO
        $('#live').text(entered + "-");
      }    

    });
 });
</script>