動的入力プレースホルダJavaScript

Question

テキスト領域内の特定の単語[データベースの特定のデータのみで実行時に置き換えられる]の位置をユーザーが表示できるようにします。

例：すべてのメンバーの有効期限が異なることをユーザーに通知し、スケジュールメッセージウィンドウにテキスト領域があり、ユーザーがメッセージを入力できるようにしたい。

例：メッセージのようなものである場合は、実行時に私から実際の値に$日付$を置き換えます。このメッセージにそう

を「有効期限日が$日付$で新しいルールに従って親愛なるユーザーありがとうございます。」データベース。

var message= message.replace("$date$", db_value_date); 

しかし、ユーザーは次のように任意の順序 でメッセージを作成することができ、「$日付$有効期限れる」または「延滞料を避けるために、$日付$の前に充電するには」などのみルールは$日付$はに存在しなければならないですテキストの一部

これで、ユーザーはメッセージを編集できますが、テキスト "$ date $"は編集できませんが、テキストフィールドまたはテキストエリアの任意の場所でその位置を変更できます。

$ date $がテキスト領域に存在するかどうかを常に確認できます。存在しない場合は、ユーザーに無効なメッセージを伝えることができます。しかし、UIスタイリングは壊れてしまいます。

Answer 1

TEXTAREAが$data$か

EDIT

コードは現在、複数のテキストエリアで動作含まれている場合は、検証を確認するために容易になるだろう。エラーのidは "エラー"

がerror

var error = document.getElementById("error"); 
 

 
function validate() { 
 
    var textAreas = document.getElementsByClassName("specialText"); 
 
    for (var i = 0; i < textAreas.length; i++) { 
 
    var textArea = textAreas[i]; 
 
    var text = textArea.value; 
 
    var id = textArea.id; 
 
    var linkedError = document.getElementById(id + "Error"); 
 
    if (text.indexOf("$data$") === -1) 
 
     linkedError.style.visibility = "visible"; 
 
    else 
 
     linkedError.style.visibility = "hidden"; 
 
    } 
 
}

.error { 
 
    color: red; 
 
    visibility: hidden; 
 
}

First text 
 
<br> 
 
<textarea class="specialText" id="FirstText"></textarea> 
 
<p id="FirstTextError" class="error">You forgot to add '$data$' in first Text</p> 
 

 
Second text 
 
<br> 
 
<textarea class="specialText" id="SecondText"></textarea> 
 
<p id="SecondTextError" class="error">You forgot to add '$data$' in second text</p> 
 

 
Third text 
 
<br> 
 
<textarea class="specialText" id="ThirdText"></textarea> 
 
<p id="ThirdTextError" class="error">You forgot to add '$data$' in third text</p> 
 
<button onclick="validate()">Send</button>