如何在用户输入的输入type = text中附加％符号? [英] How to append % symbol in input type=text on user input?

问题描述

我正在使用数字微调器，默认情况下，我希望输入在文本框中使用％符号.我尝试使用span，但它在框外添加了符号.

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.

推荐答案

您可以使用jQuery change事件来实现.它将在您输入的末尾添加'％'符号.

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) {
      return false;
    } else {
      $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 5 + '%');
    }
  });

  $('.txtinput').on("change", function() {
    var inputVal = parseFloat($(this).val().replace('%', '')) || 0

    if (minNumber > inputVal) {
      inputVal = -100;
    } else if (maxNumber < inputVal) {
      inputVal = 100;
    }

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

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

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

这篇关于如何在用户输入的输入type = text中附加％符号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！