使用 javascript 重置 html 所需的样式

Posted 2023-03-12

【中文标题】使用 javascript 重置 html 所需的样式

【英文标题】：Reset html required style with javascript

【发布时间】：2016-05-07 15:55:19

【问题描述】：

我有一个带有所需属性集的输入的表单。当我提交表单并且输入为空时，它会在其周围显示一个红色边框。

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

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

快速说明我的问题：

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 解决方案来删除消息。

【问题讨论】：

“当我提交表单并且输入为空时，它会在其周围显示一个红色边框。”红色边框如何应用于元素？在css，还是js？你可以在 Question? 中加入css，创建 stacksn-ps 来演示？ input 元素是否应该具有 value 属性？

@pomber Firefox，我现在看到，在 chrome 中，当不聚焦时，边框会被删除。

@guest271314 Firefox 中自动添加红色边框。没有比我放在这里的更多的 css 或 js 了。并且输入元素不应该有值属性。

你可以使用css:focus，:invalid。 “不过，我还在寻找一个js解决方案来删除消息”你说的“删除消息”是什么意思？

@guest271314 提交时，会显示类似“此字段为必填项”的消息。当我不专注时，它会被删除，但我正在寻找一种 js 方法来删​​除该消息。

【参考方案1】：

编辑、更新

我想重置样式，而不是阻止它发生（当我不 专注于它）。

您可以在click 上的#reset 元素上添加一个className 到#myinput 元素，将box-shadow 设置为none 和border 到inherit。删除 focus 上的 focus 或 change 事件上的 #myinput 元素上的 className，这取决于您是否希望在无效输入或用户输入值时删除 focus 上的 box-shadow 和 border。

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

---

提交后，会显示“此字段为必填项”之类的消息。这 当我不专注时被删除，但我正在寻找一个 js 方法来删​​除 那条消息。

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

---

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

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>

【讨论】：

感谢您的建议，但这并不能满足我的要求。我想重置样式，而不是阻止它发生（当我不关注它时）。

@user4493177 查看更新后的帖子。似乎在 webkit 浏览器和每晚返回预期结果

【参考方案2】：

我无法在这里复制它。但可能您的问题是应用于输入的pseudo-class。 鉴于您无法删除伪类，也许您可​​以覆盖样式。类似的东西：

:invalid 
  box-shadow: none;


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


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

如果您只需要在单击重置按钮时应用样式，请将样式添加到您自己的类中，并在需要时添加/删除该类。

【参考方案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>