Question

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

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

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

快速解释我的问题：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

修改我在firefox中测试了这个。在chrome中，当元素聚焦时，会自动删除样式。但是，我仍然在寻找一个js解决方案来删除该消息。

Answer 1

修改，更新

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

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

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

提交时，它会显示一条消息，如＆＃34;此字段是必需的＆＃34;。这个当我解开时删除，但我正在寻找一个删除的js方法那条消息。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

$(document).ready(function() {
    //check the state of the checkox
    $(".showinvoice").is(':checked') {
        var stats = $(this).attr('data-id');
        $("#"+stats).css('display','block');
    }
    //check the code only when the click button is triggered    
    $(".showinvoice").click(function(e) {
        var getStudent = $(this).attr('data-id');
        if ($(this).is(':checked')) {
            $("#"+getStudent).css('display','block');
        } else {
            $("#"+getStudent).css('display','none');
        }
    });
});

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

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用javascript重置html所需的样式

3 个答案: