如何禁止输入中的字符

Question

我有一个计算器，可以从输入中获取值，然后执行一些计算。每个输入都是type="number"字段。一切正常，但如果您使用.或-，则计算器工作不正常。我在控制台中看到一个空值，但它与,一起正常工作。我添加了pattern="\d+(,\d{2})?"，但也许我做错了什么，但这没有用？

我需要禁止输入.和-，如果有人解释如何在,之后将值减少为两个字符以使其看起来像价格，那就太棒了。 / p>

谢谢

以下是我的例子：

＆＃13;

＆＃13;

$('.calculator-button').on('click', function() {
  var calculator = {
    priceGbo: $('#price_gbo').val(),
    priceFuel: $('#price_fuel').val(),
    priceGas: $('#price_gas').val(),
    priceMile: $('#expenses_mile').val(),
    priceDay: $('#expenses_day').val()
  };

  var everydayEconomy = calculator.priceDay * (calculator.priceMile / 100) *
                        (calculator.priceFuel - calculator.priceGas * 1.1);
  var fiveYears = everydayEconomy * 1825;
  var feedbackTime = calculator.priceGbo / everydayEconomy;

  $('#everyday_economy').text(everydayEconomy.toFixed(0));
  $('#fiveYears_economy').text(fiveYears.toFixed(0));
  $('#feedback_time').text(feedbackTime.toFixed(0));
});

＆＃13;

.call-modal {
  width: 380px;
  height: 48px;
  background: #ffc107;
  color: black;
  font-size: 18px;
  font-family: "Pt Sans Bold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
  cursor: pointer;
  margin: 0.667em 0;
}
/** Added to reduce clutter. */
.calculator-inputs-left-row__text,
.calculator-results-item__text {
  display: inline-block;
  width: 13em;
  font-weight: bold;
}
.calculator-inputs-left-row__text:after,
.calculator-results-item__text:after {
  content : ': ';
}
.calculator-inputs-left-row__input,
.calculator-results-item__result {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-inputs-left">
  <div class="calculator-inputs-left-row">
    <div class="calculator-inputs-left-row__text">Price GBO ($)</div>
    <div class="calculator-inputs-left-row__input">
      <input type="number" pattern="\d+(,\d{2})?" class="calculator-input" id="price_gbo" min="0" value="">
    </div>
  </div>
  <div class="calculator-inputs-left-row">
    <div class="calculator-inputs-left-row__text">Price fuel ($)</div>
    <div class="calculator-inputs-left-row__input">
      <input type="number" class="calculator-input" id="price_fuel" min="0" value="">
    </div>
  </div>
  <div class="calculator-inputs-left-row">
    <div class="calculator-inputs-left-row__text">Price gas ($)</div>
    <div class="calculator-inputs-left-row__input">
      <input type="number" class="calculator-input" id="price_gas" min="0" value="">
    </div>
  </div>
  <div class="calculator-inputs-left-row">
    <div class="calculator-inputs-left-row__text">Consumption on 100 km (l)</div>
    <div class="calculator-inputs-left-row__input">
      <input type="number" class="calculator-input" id="expenses_mile" min="0" value="">
    </div>
  </div>
  <div class="calculator-inputs-left-row">
    <div class="calculator-inputs-left-row__text">Average daily mileage (km)</div>
    <div class="calculator-inputs-left-row__input">
      <input type="number" class="calculator-input" id="expenses_day" min="0" value="">
    </div>
  </div>
</div>
<div class="call-modal calculator-button">Get result</div>
<div class="calculator-line"></div>
<div class="calculator-results">
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">Daily savings ($)</div>
    <div class="calculator-results-item__result">
      <span id="everyday_economy"></span>
    </div>
  </div>
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">For 5 years of operation ($)</div>
    <div class="calculator-results-item__result">
      <span id="fiveYears_economy"></span>
    </div>
  </div>
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">Payback period (days)</div>
    <div class="calculator-results-item__result">
      <span id="feedback_time"></span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可能希望使用parseFloat解析输入：

var calculator = {
  priceGbo: parseFloat($('#price_gbo').val()),

"12"*"5.0"之类的计算将在Javascript中生效并生成60，而"12"*"5,0"将返回NaN。

将字符串解析为浮点数可以解决问题：

parseFloat("12")*parseFloat("5,0") == 60 // true

Answer 2

要真正回答这个问题：

<input type="number" pattern="^(?:\d|[^.e-])+$"/>

输入验证仅在您使用带有<form onSubmit="javascript:doCalculation()">按钮的<input type="submit"/>元素时才有效。只有在验证成功时才会调用onSubmit处理程序。

某个按钮的onClick处理程序始终能够在不进行任何验证的情况下读取当前值。

https://www.w3schools.com/tags/att_input_pattern.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

Answer 3

数字字段中不允许使用,等字符。请查看specs以获取W3C浮点数数据类型。

你需要做几件事：

1. 在表单中包含输入以使用本机提交验证
2. 在提交时使表单返回false，以使其不从页面导航。
3. 将所有输入更改为带有模式的文本字段。我在最顶层添加了这个逻辑。
4. 使用解析器函数将所有数字标准化为正确的浮点数。

以下示例显示了所有这些内容。

＆＃13;
＆＃13;
// Change number fields to text with number validation.
// See: https://stackoverflow.com/questions/13412204/localization-of-input-type-number
$('.calculator-input').each(function() {
  $(this).attr('type', 'text').attr('pattern', '\\d+(,\\d{2})?');
});

$('.calculator-button').on('click', function() {
  var calculator = {
    priceGbo: currencyParser($('#price_gbo').val()),
    priceFuel: currencyParser($('#price_fuel').val()),
    priceGas: currencyParser($('#price_gas').val()),
    priceMile: currencyParser($('#expenses_mile').val()),
    priceDay: currencyParser($('#expenses_day').val())
  };

  var everydayEconomy = calculator.priceDay * (calculator.priceMile / 100) *
                        (calculator.priceFuel - calculator.priceGas * 1.1);
  var fiveYears = everydayEconomy * 1825;
  var feedbackTime = calculator.priceGbo / everydayEconomy;

  $('#everyday_economy').text(everydayEconomy.toFixed(0));
  $('#fiveYears_economy').text(fiveYears.toFixed(0));
  $('#feedback_time').text(feedbackTime.toFixed(0));
});

// See: https://gist.github.com/leodutra/3057153
function currencyParser(str) {
  str = (str + '').replace(/[^\d,.-]/g, '');
  var sign = str.charAt(0) === '-' ? '-' : '+';
  var minor = str.match(/[.,](\d+)$/);
  str = str.replace(/[.,]\d*$/, '').replace(/\D/g, '');
  return Number(sign + str + (minor ? '.' + minor[1] : ''));
}
＆＃13;
.call-modal {
  width: 380px;
  height: 48px;
  background: #ffc107;
  color: black;
  font-size: 18px;
  font-family: "Pt Sans Bold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  margin: 0.667em 0;
}
/** Added to reduce clutter. */
.calculator-inputs-left-row__text,
.calculator-results-item__text {
  display: inline-block;
  width: 13em;
  font-weight: bold;
}
.calculator-inputs-left-row__text:after,
.calculator-results-item__text:after {
  content : ': ';
}
.calculator-inputs-left-row__input,
.calculator-results-item__result {
  display: inline-block;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return false">
  <div class="calculator-inputs-left">
    <div class="calculator-inputs-left-row">
      <div class="calculator-inputs-left-row__text">Price GBO ($)</div>
      <div class="calculator-inputs-left-row__input">
        <input type="number" pattern="\d+(,\d{2})?" class="calculator-input" id="price_gbo" min="0" value="">
      </div>
    </div>
    <div class="calculator-inputs-left-row">
      <div class="calculator-inputs-left-row__text">Price fuel ($)</div>
      <div class="calculator-inputs-left-row__input">
        <input type="number" class="calculator-input" id="price_fuel" min="0" value="">
      </div>
    </div>
    <div class="calculator-inputs-left-row">
      <div class="calculator-inputs-left-row__text">Price gas ($)</div>
      <div class="calculator-inputs-left-row__input">
        <input type="number" class="calculator-input" id="price_gas" min="0" value="">
      </div>
    </div>
    <div class="calculator-inputs-left-row">
      <div class="calculator-inputs-left-row__text">Consumption on 100 km (l)</div>
      <div class="calculator-inputs-left-row__input">
        <input type="number" class="calculator-input" id="expenses_mile" min="0" value="">
      </div>
    </div>
    <div class="calculator-inputs-left-row">
      <div class="calculator-inputs-left-row__text">Average daily mileage (km)</div>
      <div class="calculator-inputs-left-row__input">
        <input type="number" class="calculator-input" id="expenses_day" min="0" value="">
      </div>
    </div>
  </div>
  <button type="submit" class="call-modal calculator-button">Get result</button>
</form>
<div class="calculator-line"></div>
<div class="calculator-results">
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">Daily savings ($)</div>
    <div class="calculator-results-item__result">
      <span id="everyday_economy"></span>
    </div>
  </div>
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">For 5 years of operation ($)</div>
    <div class="calculator-results-item__result">
      <span id="fiveYears_economy"></span>
    </div>
  </div>
  <div class="calculator-results-item">
    <div class="calculator-results-item__text">Payback period (days)</div>
    <div class="calculator-results-item__result">
      <span id="feedback_time"></span>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;