2016-05-25 9 views
2

私はそこに悪い言葉があれば自分のテキストエリアをチェックできるスクリプトを作らなければなりません。ユーザーがテキストエリアを離れると、警告ボックスが表示されるはずです。その後、入力されたテキストを削除する必要があります。JavaScriptはアラートボックスを使用してテキストエリアの悪い単語を避けますか?

JavaScriptソリューションが必要です(jQueryは必要ありません)。

+0

'document.getElementById(" textarea ");'を使用してテキストエリアの値を取得し、あなたが話している悪い単語のインデックスを見つけます。 indexが0より大きい場合は、悪い単語が含まれます。ユーザーに警告します。 – viveksinghggits

+1

あなたのソリューションには何が間違っていますか? –

+0

実際にテキストエリアを終了すると、警告ボックスは表示されません。その後、テキストエリア内のテキストを削除する必要があります。 – CodeboyCap

答えて

3

あなたができることは次のとおりです。それにキーが押されるたびにチェックして、コールバックとしてあなたの関数を渡しますテキストエリアにイベントリスナーをアタッチその後

function filterTextarea() { 
    var textarea = document.getElementById('textarea'); 
    var matches = textarea.value.match(<THE REGEX FOR THE WORDS YOU WANT TO FILTER>); 

    if (matches) { 
    alert('Hey, no bad words!'); 
    textarea.value = ''; 
    return; 
    } 

    // Other stuff. 
} 

:まず、無効な単語をチェックして、テキストエリアをクリアする関数を作成します。ユーザーがテキストエリアを離れるときにチェックするために何のイベントハンドラがないため

document.getElementById('textarea').addEventListener('keyup', filterTextarea, false); 
+0

この問題は、ユーザが悪い言葉を削除してカーソルを動かすと、各キーに対して '警告'が表示されます。 –

+0

実際に、これが何をしているのか(そして尋問者が要求したもの)は、テキストエリアがクリアです。したがって、悪い単語が検出された場合、テキスト全体が削除されます。それは良いアイデアやUXだと言っているわけではありませんが、それは尋ねられていたものでした。 – GMchris

0

あなたの関数が呼び出されません。その理由は、(うまくそれが一度ページのロード時に、呼び出されるん)です。 onChangeまたはonBlurのいずれかを使用できます。ユーザーが離れるときに両方がトリガーされますが、onChangeはコンテンツが実際に変更されたときにのみトリガーされます。

はこれにあなたのコードを変更してみてください:悪い言葉上のチェックについては

 <textarea name="ric" id="textarea" onBlur="check()"> 


     </textarea> 

       <script> 
       var check = function(){ 
       my_textarea = document.getElementById('textarea'); 

        if (/\b(?=\w)(asshole|fucking)\b(?!\w)/i.test(my_textarea.value)) { 
         alert("Hey no bad words here!"); 
         my_textarea.value = ""; 
        } else { 
         // Okay move on! 
        }} 
       </script> 

、他の人が述べたように、インデックスが発見された場合は、ループ<text>.indexOf(<bad word>)として「悪い言葉」の配列を確認することができますかない。正規表現を使用すると「より良い」方法があるかもしれませんが、それを助けることはできません

+0

あなたのコメントは、onchangeがより良い理由を説明しますが、あなたはまだonblurと一緒に行きましたか? –

+0

私のコメントはちょうど違いを述べました。私はonChurrの代わりにonBlurを使用する特別な理由はありません。状況に依存していると思います。 – ThomasS

+0

はい、変更されていない場合、何かを検証するのはなぜですか? –

0

このコードは動作するはずです。また、単語をアスタリスク文字のグループに置き換えて検閲します。

0

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>RIC</title> 
 
    </head> 
 
    
 
    <body> 
 
    <textarea name="ric" id="textarea" onblur="checkWords()"></textarea> 
 
    
 
    <script> 
 
     function checkWords() { 
 
     var my_textarea = document.getElementById('textarea').value; 
 
     var pattern = /fox|dog/ig; 
 
     
 
     if (my_textarea.match(pattern)) { 
 
      alert("Hey no bad words here!"); 
 
      my_textarea = my_textarea.replace(pattern, "****"); 
 
      document.getElementById('textarea').value = my_textarea; 
 
     } 
 
     
 
     } 
 
    </script> 
 
    
 
    </body> 
 
</html>
はここに私のコードを行く、あなたの悪い言葉でBADWORD配列を移入しますと、このコードは、悪い言葉に反対しなければならない、それが意志してください。!!!

 <div> 
      <textarea name="ric" id="txtArea" onkeyup="badWordChecker()" onblur="nothingTyped()"> </textarea> 
     </div> 
     <script> 
      function nothingTyped() { 
       var badWordTextBoxLength = document.getElementById('txtArea').value.length; 

       if (badWordTextBoxLength == 0) { 
        alert("YOu cannot leave easily!!!Please type something "); 
        document.getElementById('txtArea').focus(); 
        return false; 
       } 
      } 
      function badWordChecker() { 
       //create an array of bad words 
       var badwords = ["f***", "a****", "f***"]; 
       var badWordTextBox = document.getElementById('txtArea'); 
       var badWordTextBoxValue = badWordTextBox.innerText; 
       var backgroundcolor = "white"; 

       function isTheWordBad(value, index, array) { 
        if (value == badWordTextBoxValue) { 
         alert("hey!No badwords"); 
         badWordTextBox.textContent = ""; 
         return true; 
        } 
        else {      
         return false; 
        } 

       } 
       var result = badwords.filter(isTheWordBad); 
      } 
     </script> 
</body> 
関連する問題