我有一个带有居中文本的输入按钮。文本长度随着 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/ (应按下按钮)
最佳答案
因为这是一个值并且无法插入额外的元素,所以最简单的方法是仅使用前导空格使文本显示为始终居中。
这使用了我为你的 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">
关于javascript - 如何防止动态更改时输入按钮中的居中文本移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45263811/