使用 Javascript 更改值时更新占位符显示答案

【问题标题】：Update placeholder display when the value was changed with Javascript使用 Javascript 更改值时更新占位符显示
【发布时间】：2014-07-22 16:23:57
【问题描述】：

我有一个使用 Orchard CMS 设置的页面。我发现的问题是我无法为联系表单的文本区域设置占位符值。所以我尝试使用以下方法修复它：

@using(Script.Head()) {
    <script type ="text/javascript">
    function setPlaceholder() {
        document.getElementById("ContactForm_Message_Text").setAttribute("placeholder", "Message");
    }
    window.onload = setPlaceholder;
    </script>
}

这在一定程度上有效，但文本区域仅在我单击文本区域时更新占位符。有什么技巧可以解决这个问题，还是我处理不正确？

【问题讨论】：

您可以伪造焦点字段来更新占位符。
这行得通。我添加了document.getElementById("ContactForm_Message_Text").focus();，但如果它没有留下焦点，我会更喜欢。之后我尝试转移它，但没有奏效。现在很好解决，但欢迎其他想法。

标签： javascript html orchardcms placeholder

【解决方案1】：

最优雅的方法是在更新 placeholder 后更改值。这将强制 DOM 更新 textarea。你可以在这里看到结果：

这里：jsfiddle for placeholder dynamically changed

function setPlaceholder() {       
  document.getElementById("ContactForm_Message_Text").setAttribute("placeholder", "Message");
  document.getElementById("ContactForm_Message_Text").value = "";
}

【讨论】：

问题是，它可以在没有将值设置为“”的情况下工作。见jsfiddle.net/4g2xp/1。我认为这是 Orchard 遇到的问题。不过，如果需要，这是一种简洁而优雅的方式来更新显示。