动态输入占位符JavaScript

Question

我希望允许用户在文本区域中显示特定单词的位置[在运行时将仅替换来自数据库的特定数据]。

示例：我想告知用户所有成员的有效期限到期日，并且计划消息窗口包含文本区域并允许用户输入消息。

示例：如果消息类似于＆＃34;亲爱的用户根据新规则到期日期为$ date $。谢谢你＆＃34;

因此在运行期间的此消息中，我将用数据库中的实际值替换$ date $。

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

但是用户可以按任何顺序撰写邮件 喜欢＆＃34; $ date $是到期日＆＃34;或者＆＃34;在$ date $之前充值以避免滞纳金＆＃34;等等只有规则是$ date $必须出现在文本的某些部分。

所以我允许用户编辑邮件而不是文本＆＃34; $ date $＆＃34;但是他们可以在文本字段或文本区域的任何位置更改其位置。

我总是可以检查文本$ date $是否存在于文本区域中，如果不存在我可以通知用户该消息无效。但UI样式将被打破。

Answer 1

如果textarea包含$data$或不包含

，则检查验证会更容易

修改

该代码现在可以与多个textarea一起使用。错误的id应该是TextArea的id +＆＃34; 错误＆＃34;

在课程error

上添加您的CSS自定义

＆＃13;

＆＃13;

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";
  }
}

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;