web-dev-qa-db-ja.com

数値および小数の入力マスク

プログラムをテストした後、ソフトウェアアプリケーション管理の請求書発行に気付きました。次のエラーに気付きました。sqlserverのテーブルには次が含まれています。しかし、555555を入力するとエラーになるため、仮数はオプションの0〜999で、ユーザーの選択に応じて小数部は2または3にプログラムできるマスクを指定する必要があります。JQueryMasked入力プラグインを使用しています良い正規表現が見つかりません、助けてください、私はjsp/servletで作業しています。

javascriptjqueryhtmlregexinput-mask
16
najeh22

jquery numeric を数値に使用できます。
現在のバージョンはあなたが探しているものを許可しますが、誰かが changed コードを少し持っており、それは動作します：

[〜＃〜] html [〜＃〜]

<input class="numeric" type="text" />

Javascript

$(".numeric").numeric({ decimal : ".",  negative : false, scale: 3 });

これが全体 source です。
そして、私はこれを準備しました フィドル あなたがそれがどのように機能するかを見ることができます。

21
LeftyX

jQuery入力マスクプラグインを使用（6桁全体と小数点以下2桁）：

HTML：

<input class="mask" type="text" />

jQuery：

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\.\\d{1,2})?$"});

これが誰かの助けになることを願っています

9
Rick

Jquery inputmask pluginを使用して実行できます。

HTML：

<input id="price" type="text">

Javascript：

$('#price').inputmask({
  alias: 'numeric', 
  allowMinus: false,  
  digits: 2, 
  max: 999.99
});

https://codepen.io/vladimir-vovk/pen/BgNLgv

4
Vladimir Vovk

Tow関数を使用して解決し、非常にシンプルで便利です：

HTML：

<input class="int-number" type="text" />
<input class="decimal-number" type="text" />

JQuery：

//Integer Number
$(document).on("input", ".int-number", function (e) {
  this.value = this.value.replace(/[^0-9]/g, '');
});

//Decimal Number
$(document).on("input", ".decimal-number", function (e) {
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
});
1
ali abolhasani

またはまた

<input type="text" onkeypress="handleNumber(event, '€ {-10,3} $')" placeholder="€  $" size=25>

と

function handleNumber(event, mask) {
    /* numeric mask with pre, post, minus sign, dots and comma as decimal separator
        {}: positive integer
        {10}: positive integer max 10 digit
        {,3}: positive float max 3 decimal
        {10,3}: positive float max 7 digit and 3 decimal
        {null,null}: positive integer
        {10,null}: positive integer max 10 digit
        {null,3}: positive float max 3 decimal
        {-}: positive or negative integer
        {-10}: positive or negative integer max 10 digit
        {-,3}: positive or negative float max 3 decimal
        {-10,3}: positive or negative float max 7 digit and 3 decimal
    */
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/[^-\d,]/)) return
        with (target) {
            var txt = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var dot = count(txt, /\./, pos)
    txt = txt.replace(/[^-\d,]/g,'')

    var mask = mask.match(/^(\D*)\{(-)?(\d*|null)?(?:,(\d+|null))?\}(\D*)$/); if (!mask) return // meglio exception?
    var sign = !!mask[2], decimals = +mask[4], integers = Math.max(0, +mask[3] - (decimals || 0))
    if (!txt.match('^' + (!sign?'':'-?') + '\\d*' + (!decimals?'':'(,\\d*)?') + '$')) return

    txt = txt.split(',')
    if (integers && txt[0] && count(txt[0],/\d/) > integers) return
    if (decimals && txt[1] && txt[1].length > decimals) return
    txt[0] = txt[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.')

    with (event.target) {
        value = mask[1] + txt.join(',') + mask[5]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\./, pos) - dot) 
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}
1
Giacomo

システムが英語の場合、@ Rick回答を使用します。

システムがブラジルポルトガル語の場合、これを使用します。

インポート：

<script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

HTML：

<input class="mask" type="text" />

JS：

$(".mask").inputmask('Regex', {regex: "^[0-9]{1,6}(\\,\\d{1,2})?$"});

その理由は、ブラジルのポルトガル語では、英語のように「1,000,000.00」ではなく「1.000.000,00」と書くため、「。」を使用するとシステムは小数点を理解しません。

それは、それが誰かを助けることを願っています。私はそれを理解するために多くの時間を費やしています。

0
Michel Fernandes

必要なものがよりよく理解できたので、ここで提案します。この正規表現でテキストボックスの内容をチェックするテキストボックスのキーアップハンドラーを追加します^[0-9]{1,14}\.[0-9]{2}$そして、一致しない場合は、背景を赤にするか、テキストなどを表示します。これがdocument.readyに入れるコードです

$(document).ready(function() {
    $('selectorForTextbox').bind('keyup', function(e) {
        if (e.srcElement.value.match(/^[0-9]{1,14}\.[0-9]{2}$/) === null) {
            $(this).addClass('invalid');
        } else {
            $(this).removeClass('invalid');
        }
    });
});

これが実際の JSFiddle です。また、同じ正規表現サーバー側を実行し、一致しない場合、要件は満たされていません。また、onsubmitイベントをチェックして、正規表現が一致しなかった場合にユーザーがページを送信できないようにすることもできます。

テキストの挿入時にマスクを適用しない理由は、物事を非常に複雑にするためです。コメントで述べたように、ユーザーは有効な入力を開始することはできません。なぜなら、その入力は有効ではないからです。可能ですが、代わりにこれをお勧めします。

0
Bikonja

imaskjs を試してください。 Number、RegExp、その他のマスクがあります。拡張が非常に簡単です。

0
uNmAnNeR