从 JavaScript 更改样式不保存答案

【问题标题】：Changing Style From JavaScript Not Saving从 JavaScript 更改样式不保存
【发布时间】：2018-12-14 09:46:14
【问题描述】：

当我想从 JavaScript 更改 css 样式时，我的网站出现了问题，但只有几秒钟。

function validateForm() {
    var fname = document.getElementById('<%=UserFnameTextBox.ClientID%>');
    if (fname.value == "") {
        document.getElementById("WarnUserFnameTextBox").style.opacity = 1;
        document.getElementById('<%=UserFnameTextBox.ClientID%>').style.borderColor = "red";
        getElementById('<%=UserFnameTextBox.ClientID%>').focus;
    }
}

我也在使用 Asp.net，这就是我这样写 ID 的原因

我希望 JS 会在用户输入文本框时保存样式。

【问题讨论】：

您正在提交一个表单，该页面作为服务器响应重新加载。请注意，最后一行缺少document 和()。
就像@Teemu 说的：您的样式触发正确，但是一旦您提交表单，您的网页就会重新加载并回退到“默认”值，好像 JS 永远不会触发（因为它真的没有在那“一生”中）。如果你想让它永久化，我建议你只要有错误就禁用提交按钮。这样，只要有错误，样式就可以使用。
请将返回结束设置为false
对于初学者来说，永远不要以这种方式访问数据，总是将 getElementById 的返回值分配给一个临时变量并检查它，在尝试访问它之前确保它有效，你的 Id 引用至少是无效的第二和第三不是。
@RaviChauhan 根据调用验证函数的方式，返回 false 可能有效，也可能无效。

标签： javascript html css

【解决方案1】：

这里有很多事情：我建议您的validateForm() 函数在您的提交按钮上的onClick 中触发，对吗？你的按钮看起来有点像这样吗？

<input type="submit" value="submit" onClick="validateForm()">

如果是这种情况，您的样式work only for few seconds 的原因仅仅是网站重新加载。样式已生效，但表单也会触发并发送到您在 <form action> 中添加的站点。重新加载后，网站将回退到其默认样式，就好像从未发生过错误一样……这在该网站的实例上是正确的。

如果你想让它永久存在，你必须禁用submit-button，只要有无效的字段。您也可以对表单元素使用required 属性，因为只要存在无效字段，表单就不会提交。这些也可以设置样式。

看看这些 CSS 规则：

/* style all elements with a required attribute */
:required {
    background: red;
}

您也可以使用jQuery 并使用preventDefault 禁用表单提交。只要输入字段中有空/无效字符，您就可以处理每种样式并进行相应调整。我建议将其与onKeyUp-function 结合使用。这样，您每次用户释放密钥时都会进行检查，并在您的输入有效时立即做出反应。

以jQuery为例：

var $fname   = $('#<%=UserFnameTextBox.ClientID%>');
var $textBox = $('#WarnUserFnameTextBox');

$fname.on("input", function() {
    var $this = $(this);
    if($this.val() == "") {
        $textBox.show();
        $this.focus().css("border", "1px solid red");
    }
});

（感谢您指出我的错误并优化代码，@mplungjan！）。

要“禁用”实际的表单提交，请参阅此答案： https://stackoverflow.com/a/6462306/3372043

$("#yourFormID").submit(function(e){
    return false;
});

这是未经测试的，请随时指出我的错误，因为我现在无法检查它。您可以尝试如何处理“错误处理”，也许切换到onKeyDown() 或change()，这取决于您的需求/用例。

由于您的问题没有用jQuery 标记，因此请查看mplungjan 给出的这个答案，因为它使用没有任何框架的本机JS。 https://stackoverflow.com/a/53777747/3372043

【讨论】：

你想要 var $fname = $('#<%=UserFnameTextBox.ClientID%>') 和 $fname.on("input", function() { if($(this).val() == "") { - 不是 keyup - 也不是 jQuery 标记
你不断地从 jQuery 对象制作 jQuery 对象。不需要
感谢@mplungjan 指出这一点！赞赏。信用到期的信用。你也是对的，没有 jQuery 标签。我也会链接到你的答案
var $fname = $('#<%=UserFnameTextBox.ClientID%>'), $textBox = $('#WarnUserFnameTextBox'); $fname.on("input", function() { var $this = $(this); if ($this.val() == "") { $textBox.show(); $this.focus().css("border", "1px solid red"); } }) - 或者更好地切换文本框

【解决方案2】：

这可能是您想要的。如果没有错误，它将停止提交表单并重用该字段并重置

假设<form id="myForm"

window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", function(e) {
    var field = document.getElementById('<%=UserFnameTextBox.ClientID%>');
    var error = field.value.trim() === "";
    document.getElementById("WarnUserFnameTextBox").style.opacity = error ? "1" : "0"; // or style.display=error?"block":"none";
    field.style.borderColor = error ? "red" : "black"; // reset if no error
    if (error) {
      field.focus();
      e.preventDefault();
    }
  });
});

【讨论】：