Question

当我想通过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在用户输入文本框的时间内保存样式。

Answer 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函数结合使用。这样，您可以在用户每次释放密钥时进行检查，并在输入有效后立即做出反应。

以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

Answer 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();
    }
  });
});

从JavaScript更改样式不保存

2 个答案: