JQuery入力値の数値と小数点のみ

Question

入力フィールドには数字と小数点のみを入力します。

入力フィールドには、小数点以下1桁以外の文字、負号、記号を使用しないでください。 数字1は、入力タイプ「テキスト」で完全に正常に機能します。 しかし、2番は機能しません。唯一の違いは、type_numberです。

数字と小数のみを入力します。負でもなく、文字も記号もありません。

Answer 1

$('#decimal').keyup(function(){ 
 
    var val = $(this).val(); 
 
    if(isNaN(val)){ 
 
     val = val.replace(/[^0-9\.]/g,''); 
 
     if(val.split('.').length>2) 
 
      val =val.replace(/\.+$/,""); 
 
    } 
 
    $(this).val(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="number" id="decimal"min="0" max="10" step="0.25" value="0.00" />

、入力中にこのよう

<p> 
number 2(input type="number") <input id="decimal" type="number" onchange="Numeric(this.event)" /> 
</p> 

JsのIDを追加します。 VAR pastValue、pastSelectionStart、pastSelectionEndを。

$("input").on("keydown", function() { 
    pastValue   = this.value; 
    pastSelectionStart = this.selectionStart; 
    pastSelectionEnd = this.selectionEnd; 
}).on("input propertychange", function() { 
    var regex = /^[0-9]+\.?[0-9]*$/; 

    if (this.value.length > 0 && !regex.test(this.value)) { 
     this.value   = pastValue; 
     this.selectionStart = pastSelectionStart; 
     this.selectionEnd = pastSelectionEnd; 
    } 

}); 

     $('#decimal').keyup(function(){ 
    var val = $(this).val(); 
    if(isNaN(val)){ 
     val = val.replace(/[^0-9\.]/g,''); 
     if(val.split('.').length>2) 
      val =val.replace(/\.+$/,""); 
    } 
    $(this).val(val); 
}); 

Answer 2

IDを使用する代わりに、汎用ソリューションにclassを使用できます。

 $('.inputclassname').on('keypress', function(e){ 
    return e.metaKey || // cmd/ctrl 
    e.which <= 0 || // arrow keys 
    e.which == 8 || // delete key 
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers 
    }) 

Answer 3

<input type="number" />は有効でない場合（文字が含まれている場合）は値を取得できません。 this.value.lengthにアクセスしようとするたびに、それは""に等しくなります。そのため、あなたのifステートメントには決して達しませんでした。

あなたは数字だけを受け入れる必要がある場合は、あなたが入力する前にkeyCodeをチェックし、falseを返しkeyCodeが数字や矢印キーと一致または削除しない場合、またはバックスペースする必要があります。

$("input").on("keydown", function(e) { 
 
    var charCode = e.which; 
 

 
    return !!(
 
      (charCode >= 48 && charCode <= 57) 
 
      || (charCode >= 37 && charCode <= 40) 
 
      || (charCode >= 96 && charCode <= 105) 
 
      || charCode == 17 
 
      || charCode == 13 
 
      || charCode == 46 
 
      || charCode == 8 
 
      || charCode == 9 
 
      || charCode == 188 
 

 
    ) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" min="0" step="0.1" />

Answer 4

Chromeがタイプ番号の入力用select APIとhereというメールを無効にしているように見えるので、このコードは機能しません。

Hi

The Chrome browser recently disabled the select api for inputs of type number and email: https://codereview.chromium.org/100433008/#ps60001

The select api is a collection of attributes and functions that allow us to get and set which portion of text a user has highlighted in an

The attributes and functions in question are: select() selectionStart selectionEnd selectionDirection setRangeText() setSelectionRange()

あなたjsfiddleコンソールをチェックして、エラーを正確に約あるものを見つけることができます：すべてのキーボードのキーだけで認識することによってのみ数と小数点以下を除く外するスクリプトを作成する別のASCIIコードを持って

Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

Answer 5

コードの残りは

HTML

<input type="text" class="inputNumberDot"> 

を無視されますがACSII

JS

$(document).ready(function() { 
    $('.inputNumberDot').keypress(function(event) { 
    var charCode = (event.which) ? event.which : event.keyCode 

    if (
     (charCode != 45 || $(this).val().indexOf('-') != -1) && // “-” CHECK MINUS, AND ONLY ONE. 
     (charCode != 46 || $(this).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE. 
     (charCode < 48 || charCode > 57)) 
     return false; 

    return true; 

    }); 
}); 

の作業例：https://jsfiddle.net/Luaq2f65/2/