How To Append % Symbol In Input Type=text On User Input?

I am using a number spinner, and I want the input to have % symbol in the text box, by default. I tried using span, but it adds the symbol outside the box.

Solution 1:

You can use a simple css trick for that, just add this to your code:

.spinnerinput {
  padding-right: 13px;
}

.spinner.input-group-btn-vertical::before {
  content: "%";
  position: absolute;
  right: 18px;
  top: 7px;
}

It uses ::before pseudo element selector to add the % sign to the textbox. Here is working example:

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

.spinner {
  width: 100px;
}
.spinnerinput {
  text-align: right;
}
.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}
.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}
.input-group-btn-verticali{
  position: absolute;
  top: 0;
  left: 4px;
}

.spinnerinput {
  padding-right: 13px;
}

.spinner.input-group-btn-vertical::before {
  content: "%";
  position: absolute;
  right: 18px;
  top: 7px;
}

<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="page-header"><h1>Bootstrap 3 input-spinner</h1></div><divclass="input-group spinner"><inputtype="text"class="form-control"value="42"><divclass="input-group-btn-vertical"><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-up"></i></button><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-down"></i></button></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

(Also in a fiddle)

Solution 2:

Check this:

(function ($) {
     var minNumber = -100;
     var maxNumber = 100;
     $('.spinner .btn:first-of-type').on('click', function() {
         if($('.spinner input').val() == maxNumber){
             returnfalse;
         }else{
             $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 5 +'%');
         }
     });

     $('.spinner .btn:last-of-type').on('click', function() {
         if($('.spinner input').val() == minNumber){
             returnfalse;
         }else{
             $('.spinner input').val( parseInt($('.spinner input').val(), 10) -5+'%');
         }
     });
  
  $(".spinner input").on("input", function(){
    var intValue = parseInt($(this).val().replace(/%/g, '') ) || 0;
    
    $(this).val( intValue + '%' );
  });
    })(jQuery);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divid=spinnerclass="container"><divclass="input-group spinner"><inputtype="text"class="form-control"value="0"><divclass="input-group-btn-vertical"><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-up"style="color: #C41C01">Up</i></button><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-down"style="color: #20AD4E">Down</i></button></div></div></div>

Solution 3:

You can do it with jQuery change event. It will add '%' symbol at the end of your input.

(function($) {
  var minNumber = -100;
  var maxNumber = 100;
  $('.spinner .btn:first-of-type').on('click', function() {
    if ($('.spinner input').val() == maxNumber) {
      returnfalse;
    } else {
      $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 5 + '%');
    }
  });

  $('.txtinput').on("change", function() {
    var inputVal = parseFloat($(this).val().replace('%', '')) || 0if (minNumber > inputVal) {
      inputVal = -100;
    } elseif (maxNumber < inputVal) {
      inputVal = 100;
    }

    $(this).val(inputVal + '%');
  });

  $('.spinner .btn:last-of-type').on('click', function() {
    if ($('.spinner input').val() == minNumber) {
      returnfalse;
    } else {
      $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 5 + '%');
    }
  });
})(jQuery);

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid=spinnerclass="container"><divclass="input-group spinner"><inputtype="text"class="form-control txtinput"value="0"><divclass="input-group-btn-vertical"><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-up"style="color: #C41C01"></i></button><buttonclass="btn btn-default"type="button"><iclass="fa fa-caret-down"style="color: #20AD4E"></i></button></div></div></div>