Question

我有一个带居中文字的输入按钮。文本长度使用js（点动画）动态变化，这会导致文本在按钮内移动。严格对齐填充并不合适，因为按钮中的文本将以不同的语言使用，并且具有不同的长度。需要一些通用的解决方案。主文本应居中，点应对齐到主文本的末尾。

var dots = 0;

$(document).ready(function() {
  $('#payDots').on('click', function() {
    $(this).attr('disabled', 'disabled');
    setInterval(type, 600);
  })

});

function type() {
  var dot = '.';
  if(dots < 3) {
    $('#payDots').val('processing' + dot.repeat(dots));
    dots++;
  }
  else {
    $('#payDots').val('processing');
    dots = 0;
  }
}

<input id="payDots" type="button" value="Pay" class="button">

.button{
  text-align: center;
  width: 300px;
  font-size: 20px;
}

https://jsfiddle.net/v8g4rfsw/1/（按下按钮）

Answer 1

最简单的是，这是一个值，并且无法插入额外的元素，只需使用前导空格使文本显示为始终居中。

这使用我为previous question

撰写的插件

$.fn.dots = function(time, dots) {
  return this.each(function(i,el) {
    clearInterval( $(el).data('dots') );
    
    if ( time !== 0 ) {
      var d = 0;
      $(el).data('dots', setInterval(function() {
        $(el).val(function(_,v) {
          if (d < dots) {
            d++;
            return ' ' + v + '.';
          } else {
            d = 0;
            return v.substring(dots, v.length - dots)
          }
        })
      }, time));
    }
  });
}

$(document).ready(function() {
  $('#payDots').on('click', function() {
    $(this).val('Proccessing').prop('disabled',true).dots(600, 3);
  });
});

.button{
  text-align: center;
  width: 300px;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="payDots" type="button" value="Pay" class="button">

Answer 2

您可以在下面找到更新的代码 Click Here

HTML代码

<button id="payDots">
<span>Pay</span>
</button>

JS代码

var dots = 0;

$(document).ready(function() {
  $('#payDots').on('click', function() {
    $(this).attr('disabled', 'disabled');
    setInterval(type, 600);
  })

});

function type() {
$('button').css('padding-left','100px','important');
  var dot = '.';
  if(dots < 3) {
    $('#payDots').text('processing' + dot.repeat(dots));

    dots++;
  }
  else {
    $('#payDots').text('processing');
    dots = 0;
  }
}

CSS代码

button{
  text-align: left;
  width: 300px;
  font-size: 20px;
  position:relative;
  padding-left:130px;
}

动态更改时，如何防止输入按钮中的中心文本被移动

2 个答案: