Question

我尝试操作输入元素以在禁用输入时显示舍入数字，并在启用输入时显示两位小数。可以使用javascript / jQuery或其他包来完成吗？

我目前正在使用输入类型作为＆＃34; text＆＃34;相反＆＃34;数字＆＃34;因为我还为千位分隔符显示逗号。

我将小数值保存在value属性中。当点击禁用按钮时。获取属性值并将round数设置为input.val（）

<input id="foo"  type="text" value="50.26"/>

<script>
decimal_number = $('#foo').attr("value")
$('input').val(Math.round(decimal_number))
</script>

并在启用输入时将其更改回来

<script>
decimal_number = $('#foo').attr("value")
$('input').val(decimal_number)
</script>

Answer 1

您应该使用正则表达式来检查输入值，以此为例：

$(function(){
  $('.roundedNumber').focus(function() {
    this.classList.remove("error");
    this.classList.remove("ok");
    
  })
  $('.roundedNumber').change(function() {
    var re = /^(?:\d{1,3}(,\d{3})*|\d+|\d{2}(?:,\d{2})*,\d{3})(?:\.\d+)?$/;
        if (!re.test(this.value))
          this.classList.add("error")
        else {
          this.classList.remove("error");
          this.classList.add("ok");
          }
  })

})

.error {
color:white;
background-color:red;
}
.ok {
color:white;
background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" pattern="[0-9.,]+" title="Please enter a valid decimal number." class="roundedNumber"/>
</form>

启用/禁用输入元素的小数显示

1 个答案: