使用 javascript 重置 html 所需的样式

Question

我有一个表单，其输入设置了必需的属性。当我提交表单并且输入为空时，它周围显示一个红色边框。

我现在正在寻找一种javascript方法来删除它，并将输入的显示重置为初始状态。

重新设置后再次提交，再次检查输入，如果为空则显示红框。因此我认为使用 :required 设置 css 并不能提供所需的解决方案。

快速 fiddle 来说明我的问题：

jQuery(function() {
  jQuery('#reset').click(function() {
    //Clear red border of input
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input id="myinput" required>
  <input type="submit" value="submit">
</form>
<button id="reset">reset</button>

点击重置后，表单应显示为刚加载页面时的状态。

编辑我在 Firefox 中对此进行了测试。在 chrome 中，当元素处于聚焦状态时，样式会自动删除。但是，我仍在寻找一个js解决方案来删除消息。

Answer 1

编辑、更新

I want to reset the style, not prevent it from happening (when i dont focus on it).

您可以将 className 添加到 #myinput 元素，将 box-shadow 设置为 none 并将 border 设置为 inherit 在 click 在 #reset 元素上。删除 focus 处的 className 或 #myinput 元素上的 change 事件，具体取决于您是否要删除 [=23= 处的 box-shadow 和 border ] 无效输入或用户输入值时。

.reset:-moz-ui-invalid:not(output) {
  box-shadow: none;
  border: 1px solid inherit;
}

When submitted, it shows a message like "This field is required". This is removed when i unfocuss, but i am looking for a js method to remove that message.

您可以使用 invalid 事件，.setCustomValidity(" ") 以 space 字符作为参数，在处理程序中调用 event.target。

只有在input获得焦点且输入无效时，才可以使用css:focus、:invalid将border设置为red .在 html 可以添加 pattern 属性和 RegExp \w+ 以将 input 设置为无效，如果输入的值为空字符串或只有 space 个字符

jQuery(document).ready(function() {
  jQuery("#reset").click(function() {
    jQuery("#myinput").addClass("reset")
  });
  jQuery("#myinput").focus(function() {
    jQuery(this).removeClass("reset")
  })
  .on("invalid", function(e) {
    e.target.setCustomValidity(" ");
  })
})

#myinput:focus:invalid {
  border: 1px solid red;
}
#myinput:focus {
  outline: none;
}
.reset:-moz-ui-invalid:not(output) {
  box-shadow: none;
  border: 1px solid inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input id="myinput" pattern="\w+" type="text" value="" required/>
  <input type="submit" value="submit" />
</form>
<button id="reset">reset</button>

Answer 2

这里无法重现。但可能您的问题是 pseudo-class 应用于输入。
鉴于您无法删除伪 classes，也许您可以覆盖样式。类似于：

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

如果您只需要在单击重置按钮时应用样式，请在需要时将样式添加到您自己的 class 和 add/remove class 中。

Answer 3

initial 关键字使 CSS 属性采用浏览器的默认样式，如果这正是您要寻找的...

jQuery(function() {
  jQuery('#reset').click(function() {
    //Clear red border of input
    jQuery('#myinput').css('border-color', 'initial');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
 #myinput {
  border-color: red;
 }
</style>
<form id="myform">
  <input id="myinput" required>
  <input type="submit" value="submit">
</form>
<button id="reset">reset</button>

使用 javascript 重置 html 所需的样式

Reset html required style with javascript

javascript

html

css

required