動態輸入佔位符JavaScript

Question

我想允許用戶在文本區域中顯示特定單詞的位置[將在運行時僅用來自數據庫的特定數據替換]。

例如：我想告知用戶有效期限將會因所有會員的不同而有所不同，並且日程安排消息窗口包含文本區域並允許用戶輸入消息。

例如：如果消息是一樣的東西。「尊敬的用戶按照新規則到期，日期是$日期$謝謝」

所以在運行時，這條消息，我會替換$日期$與實際值數據庫。

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

但用戶可以按任何順序 撰寫郵件，如「$日期$是到期日」或「前的$ date $充值，避免滯納金」等唯一的規則就是$日期$必須存在文本的一部分。

所以我有任何方式允許用戶編輯消息，但不是文本「$ date $」，但他們可以在文本字段或文本區域的任何位置更改其位置。

我總是可以檢查文本$ date $是否存在於文本區域，如果不存在，我可以通知用戶該無效的消息。但UI風格將被打破。

Answer 1

如果textarea的包含$data$或不

編輯

現在，該代碼可用於多個文本區域會更容易來檢查驗證。錯誤的id應該是id的文本區+的「錯誤」

加入你的CSS定製上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>