jQuery 输入时不更新脏话过滤器

Question

我想使用这个 profanity filter 动态过滤不良词。在给定的示例中，api 会将 "ass" 更改为“***”，前提是文本在页面加载之前就存在。我希望它能在输入时更改已识别的坏词，以防止有人通过我的联系表发送顽皮的消息。

这是我目前得到的：

   <div id="msg">
      <textarea type="text" onkeypress="badFilter()" id="mess_box" name="cf_message" style="height:150px;" maxlength="500" placeholder="Message" ></textarea>
   </div>

   <script>
      function badFilter() {
      $typedText = $('#mess_box').val();
      $typedText.profanityFilter({
         customSwears: ['ass']
      });
      }
   </script>

我认为 'onkeypress' 属性会强制脚本检查更新的文本区域值，但事实并非如此。

感谢帮助！

Answer 1

我不知道这个插件是如何工作的，但是

$typedText = $('#mess_box').val();  <-= reading the value, storing a string
$typedText.profanityFilter({  <-- expects jQuery object of an element, you have a string
   customSwears: ['ass']
});

应该是

$('#mess_box').profanityFilter(...);

Answer 2

您正在将过滤后的值赋给一个变量，然后您没有使用它。

function badFilter() {
 $typedText = $('#mess_box').val();
 $typedText.profanityFilter({
  customSwears: ['ass']
 });
 $('#mess_box').val($typedText);
}

最后一行会将文本应用回输入框。

问题是您在用户键入时更改输入元素的值。这样，如果用户在文本中间（而不是末尾）键入，就会出现故障。

您可以创建一个包含两个输入控件（一个隐藏，一个可见）的系统，其中一个输入控件（隐藏），而被删减的文本显示在可见控件中。当用户将光标定位在可见控件中时，您会将其定位在不可见控件中的同一字符上。更新可见控件的文本不会在用户书写时出现故障。

只有当 profanityFilter 可以使用字符串对象时，这才有效。如果不是，正确的初始化方法是

$('#mess_box').profanityFilter({
 customSwears: ['ass']
});

Answer 3

为了澄清我的问题中的含糊之处，我使用的亵渎过滤器是这个 --> https://github.com/ChaseFlorell/jQuery.ProfanityFilter

根据我的理解（这不是很好），该插件并非旨在在键入时动态过滤掉单词，这可能需要 Angularjs 或更多 DOM 操作。

Vinko Bradvica 提供了一个很好的解释并解决了这个插件，以便在输入时动态审查坏词。

Answer 4

正确的处理方式是这样的：

使用 style="visibility: hidden;"

在您的 html 中创建一个 <p> 标签

然后在您的 JS 文件中添加此代码：

$('#textarea').keyup(function () {
    $('#textarea-filter').text($('#textarea').val());
    $('#textarea-filter').profanityFilter({
      customSwears: ['ass']
    });
    $('#textarea').val($('#textarea-filter').text());
});

jQuery 输入时不更新脏话过滤器

jQuery Profanity filter not updating while typing

html

javascript

jquery

dynamic

profanity