动态输入占位符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>