带有按钮的奇怪引导行为

本文关键字：按钮 | 更新日期: 2023-09-27 18:23:36

我有一个ASP.NET MVC应用程序，带有控制器操作：

 public class InviteUserController : BaseController
 {
     public ActionResult Index()
     {
        return View();
     }
     [HttpPost]
     public ActionResult Index(InviteUserDetailsViewModel inviteUserDetails)
     {
     }
 }

在视图中：

 @using (Html.BeginForm("Index", "InviteUser", FormMethod.Post, new { @class = "form form-horizontal", role = "form" }))
 {
     <button type="submit" class="btn btn-primary" value="Submit"><i class="fa fa-check"></i> Versturen</button>  
 }

如果我单击该按钮，则控制器操作方法Index（POST）被正确命中。

但是，如果我更改按钮以在小屏幕上隐藏按钮文本：

<button type="submit" class="btn btn-primary" value="Submit"><i class="fa fa-check"></i> <span class="hidden-xs">Versturen</span></button>

如果我点击它，什么也不会发生。未调用控制器操作方法。

知道为什么会发生这种事吗？在小屏幕上隐藏按钮文本的替代方案？

带有按钮的奇怪引导行为

您可以使用CSS :after和content: ""作为变通方法-jsFidle

<button type="submit" class="btn btn-primary" value="Submit">
    <i id="versturen" class="fa fa-check"></i>
</button> 
#versturen:after {
    content: " Versturen";
}
@media (max-width: 767px) {
  #versturen:after {
    content: "";
  }
}

尽管请记住，这对屏幕阅读器不友好。。。我想你可以在按钮中添加<span class="sr-only">Versturen</span>来解决这个问题。

我想另一条途径是劫持.sr-only类，并向其添加一个媒体查询-jsFiddle

<button type="submit" class="btn btn-primary" value="Submit">
    <i id="versturen" class="fa fa-check"></i>
    <span class="sr-only-xs"> Versturen</span>
</button>
@media (max-width: 767px) {
  .sr-only-xs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
}
相关文章：