jQuery Фильтр непристойности не обновляется при вводе

Question

Я хотел бы динамически фильтровать плохие слова, используя этот profanity filter. В данном примере api изменит «задницу» на «***», только если текст был до загрузки страницы. Я хотел бы, чтобы он менял признанные плохие слова, когда они были напечатаны, чтобы кто-то не послал непослушные сообщения через мою контактную форму.

Вот что я получил до сих пор:

<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

Вы назначаете отфильтрованный значение переменной, а затем вы его не используете.

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

Последняя строка вернет текст обратно в поле ввода.

Проблема в том, что вы изменяете значение входного элемента во время ввода пользователем. Таким образом, будут сбои, если пользователь вводит текст в середине текста (а не в конце).

Вы можете создать систему из двух элементов управления вводом (одна скрытая, одна видимая), где пользователь вводит один (скрытый) текст и цензурированный текст появляется в видимом. Когда пользователь позиционирует курсор в видимом элементе управления, вы должны позиционировать его на том же символе в невидимом. Обновление текста видимого элемента управления не приведет к сбою во время записи пользователем.

Это будет работать, только если profanityFilter может работать со строковым объектом. Если нет, то правильный способ инициализирует было бы

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

Answer 2

Я не знаю, как работает плагин, но

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

Чтобы прояснить неясности от моего вопроса, Непристойная фильтра я использовал это ->https://github.com/ChaseFlorell/jQuery.ProfanityFilter

И к моему пониманию (который ISN 't great), плагин не был разработан для того, чтобы отфильтровывать слова динамически как типизированные, это может потребовать Angularjs или больше манипуляций с DOM.

Vinko Bradvica предоставил хорошее объяснение и поработал с этим плагином, чтобы динамически подвергать цензуре плохие слова по мере их ввода.

Answer 4

Правильный способ справиться с этим как то:

Создать <p> тег в вашем HTML с style="visibility: hidden;"

Затем добавьте этот код в файле JS:

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