禁用按钮后，在提交按钮之前添加加载图标

如何解决禁用按钮后，在提交按钮之前添加加载图标

在我的详细信息表单中，有一个提交按钮点击时我正在调用Ajax请求

在处理ajax请求时，我的提交按钮被禁用了

我想要的是在禁用按钮时显示诸如fa-spinner fa-spin之类的加载器图标

这是一个挑战

我不想在按钮<button disabled>...</button>内添加任何标签
仅使用HTML，CSS，超棒的字体

我也在尝试开发此方法，但是我想我可以在这里得到更多好的建议。

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

button:disabled{
  opacity: 0.66
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="banner-message">
  <p>Show loader on button disabled</p>
  <button type="button" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag,you can add class or property -->
  <br />
  <label><input type="checkBox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> disable Button</label>
  
</div>

解决方法

在您的jsFiddle中，您可以添加以下内容

.fa-spinner {
  width: 0;
  opacity: 0;
}

button:disabled .fa-spinner {
  width: auto;
  opacity: 1;
}

如果这是您想要的。

在这种情况下，您可以像以前一样使用伪元素，并向其添加fa微调器的css：D

button:before {
  content: "\f110";
  display: inline-block;
  vertical-align: middle;
  margin: .1em .4em .2em 0;
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  animation: fa-spin 2s linear infinite;
  opacity: 0;
  width: 0;
}

button:disabled:before {
  opacity: 1;
  width: auto;
}

我为您的情况写了一个完整的例子。

    function submitForm() {

        $('.form').submit(function(event) {
            event.preventDefault();

            var form = $(this);
            var submitButton = $('.js-submit-btn');

            $.ajax({
                type: form.attr('method'),url: form.attr('action'),beforeSend: function () {

                    // it's action will launch after you click submit button on form

                    submitButton.attr('disabled',true);

                    if($(submitButton).has('.fa-spinner').length === 0) {
                        $(submitButton).prepend('<i class="fas fa-spinner fa-spin"></i>');
                    }

                },complete: function () {

                    // it's action will launch after ajax request end

                    setTimeout(function () {

                        submitButton.attr('disabled',false);

                        if($(submitButton).has('.fa-spinner').length) {
                            $(submitButton).find('.fa-spinner').remove();
                        }

                    },1500);

                },data: form.serialize(),success: function (response) {
                    console.log('Response: ',response);
                },error: function () {
                    console.log('error');
                }
            });

            return false;
        });

    }

    submitForm();

<form method="post" action="/your_action_url" class="form" >

    <input type="text" name="client_name" placeholder="Your name">

    <input type="email" name="client_email" placeholder="Your email">

    <button type="submit" class="js-submit-btn"> <i class="far fa-envelope"></i> Send Email</button>

</form>

要在特定按钮上显示加载程序，只需添加类disabled-on-loading

示例<button class="disabled-on-loading" />

.disabled-on-loading:disabled:before {
        opacity: 0.65;
        content: "\f110";
        font-weight: 900;
        display: inline-block;
        font: normal normal normal 14px/1;
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        text-rendering: auto;
        line-height: 1;
        animation: fa-spin 1s infinite steps(9);
    }

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

button:disabled{
  opacity: 0.65
}

 .disabled-on-loading:disabled:before {
        opacity: 0.65;
        content: "\f110";
        font-weight: 900;
        display: inline-block;
        font: normal normal normal 14px/1;
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        text-rendering: auto;
        line-height: 1;
        animation: fa-spin 1s infinite steps(9);
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="banner-message">
  <p>Show loader on button Disabled</p>
  <button type="button" class="disabled-on-loading" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag,you can add class or property -->
  <br />
  <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label>
  
</div>

禁用按钮后，在提交按钮之前添加加载图标

如何解决禁用按钮后，在提交按钮之前添加加载图标

解决方法

相关推荐