javascript - 从 JavaScript 更改样式不保存

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 结合使用-功能。通过这种方式，您可以在用户每次释放按键时进行检查，并且可以在您的输入有效后立即使用react。

以 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