啓用/禁用輸入元素的小數點顯示

Question

我試圖操縱輸入元素以在輸入被禁用時顯示舍入數字，並且在啓用輸入時顯示兩位小數。這可以使用JavaScript/jQuery或其他軟件包來完成嗎？

我目前使用輸入類型作爲「文本」，而不是「數字」，因爲我也顯示千位分隔符的逗號。

我將十進制值保留在value屬性中。當點擊禁用按鈕。獲取屬性值和設定圈數來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>