引导文字对齐：左侧为空输入-右侧为填充输入

Question

Has Bootstrap a built in feature to align the placeholder in an empty text-input on the left, and if the user enters a number (→ filled input) to the right.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="form-group"> <div class="input-group"> <input class="form-control" maxlength="255" placeholder="Amount" name="amount" type="text" value="" id="amount"> <span class="input-group-addon financing">€</span> </div> </div> 

Answer 1

I think that it may be this what you are looking for.

$('#amount').on('keyup', function(){
if($('#amount').val().length > 0)
  $('#amount').css('text-align', 'right');
else
  $('#amount').css('text-align', 'left');
});

http://codepen.io/powaznypowazny/pen/JWXvYE

Answer 2

No Bootstrap does not have this built in but input dir="rtl" might be close enough?

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="form-group"> <div class="input-group"> <input dir="rtl" class="form-control" maxlength="255" placeholder="Amount" name="amount" type="text" value="" id="amount"> <span class="input-group-addon financing">€</span> </div> </div> 

Answer 3

 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#amount").keyup(function(){ var val = $(this).val(); if(val == ''){ $(this).css('text-align','right'); }else{ $(this).css('text-align','left'); } }) }) </script> 

easy to use jquery

Answer 4

只需在输入中使用dir="rtl"

<input dir="rtl" placeholder="Amount" name="amount" type="text">