键入时jQuery Profanity过滤器未更新

Question

我想使用此亵渎过滤器动态过滤坏词。 在给定的示例中，仅当文本在页面加载之前存在时，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'属性将强制脚本检查更新的textarea值，但事实并非如此。

帮助赞赏！

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

正确的处理方式如下：

在您的html中创建一个<p>标记，其style="visibility: hidden;"

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

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