Question

我正在尝试使用jquery创建一个主题标签系统，但是我对特殊字符ctrl+V和mause right click paste有疑问。我不想允许ctrl+v并右键单击粘贴，也不想允许像（*/-+()[]{}?-_^|!'"<>&%,.:;`）这样的特殊字符。

我们可以在我的代码中做到这一点吗？有人可以在这里帮助我吗？

这是 DEMO 页面

在此演示中，您可以看到例如在编写时如何使用jQuery代码，然后在像#这样的世界之前自动添加diez（{#how #are #you）符号。

这是快速代码：

$(document).ready(function() {
  $("body").on("keyup", "#hash", function(event) {
    var keyCode = event.keyCode;
    // Allow: backspace, delete, tab, escape et enter
    if (
      $.inArray(keyCode, [46, 8, 27]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (keyCode == 65 && (event.ctrlKey === true || event.metaKey === true)) ||
      // Allow: Ctrl+Z, Command+Z
      (keyCode == 90 && (event.ctrlKey === true || event.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (keyCode >= 35 && keyCode <= 40)
    ) {
      // let it happen, don't do anything
      return;
    }

    if ($.inArray(keyCode, [32, 9, 13]) !== -1) {
      var $textarea = $(this);
      var text = $textarea.val();
      text = XRegExp.replaceEach(text, [
        [/#\s*/g, ""],
        [/\s{2,}/g, " "],
        [
          XRegExp(
            "(?:\\s|^)([\\p{L}\\p{N}]+)(?=\\s|$)(?=.*\\s\\1(?=\\s|$))",
            "gi"
          ),
          ""
        ],
        [XRegExp("([\\p{N}\\p{L}]+)", "g"), "#$1"]
      ]);

      $textarea.val(text);
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
  });
});

.hash {
  position:relative;
  width:100%;
  border:1px solid #d8dbdf;
  outline:none;
  padding:15px;
  color:#292929;
}
.hash:focus {
  border:1px solid red;
}
.container {
  position:relative;
  width:100%;
  max-width:600px;
  margin:0px auto;
  margin-top:100px;
}

<script src="https://unpkg.com/xregexp@3.2.0/xregexp-all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input type="text" class="hash" id="hash" placeholder="Write your word and press enter"/>
</div>

Answer 1

您需要做的是防止用户执行此类操作时发生默认事件。因此，最简单的方法可能是仅捕获事件并阻止它们。

您在正确的轨道上，可以根据键码过滤掉不需要的字符。尽管这不是最理想的方式，但可以完成工作。

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

  $('#hash').bind("contextmenu", function(e) { 
      e.preventDefault(); 
  });

只需在您的$(document).ready函数中添加以上内容

Answer 2

将alphanum插件用于特殊字符。这是您想要的所有工作示例：demo

字母数字插件：jquery.alphanum

$("#hash").alphanum({ 
    allow : '#',
    disallow           : '!@$%^&*()+=[]\\\';,/{}|":<>?~`.- _',
    allowSpace         : true
});

使用jQuery禁用粘贴（Ctrl + V）

$('body').on("cut copy paste","#hash",function(e) {
      e.preventDefault();
});

不允许写特殊字符

2 个答案: