入力要素の小数点以下の桁数の表示を有効/無効にする

Question

入力が無効のときに丸められた数字を表示する入力要素を操作しようとしています。これは、javascript/jQueryまたは他のパッケージを使用して行うことができますか？

私は現在、桁区切り記号のカンマを表示しているので、入力タイプを「数字」の代わりに「テキスト」として使用しています。

私はvalue属性に10進値を保持しています。ボタンをクリックすると無効になります。 （）属性値を取得し、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>