web-dev-qa-db-ja.com

テキストボックスのキー入力で小数点以下2桁に制限しますか？

テキストボックスに小数点を入力します。小数点以下2桁以上を入力して、ユーザーを制限します。 Keypressイベントでそれを達成するためのコードを書きました。

function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    if (charCode == 46 && el.value.indexOf(".") !== -1) {
        return false;
    }

    if (el.value.indexOf(".") !== -1)
    {
        var range = document.selection.createRange();

        if (range.text != ""){
        }
        else
        {
            var number = el.value.split('.');
            if (number.length == 2 && number[1].length > 1)
                return false;
        }
    }

    return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>

コードは機能していますが、問題は次のとおりです。 「.75」 そして次にそれを 「1.75」、 それは不可能。それを行う唯一の方法は、それを完全に削除してから入力することです 「1.75」。この問題は、テキストボックスの小数点以下に既に2桁がある場合に発生します。私が課す条件は

a）小数が存在する場合、少なくとも1桁または2桁である必要があります。元のために .75または.7または10.75または333.55または333.2 受け入れられます。だがしかし .753または12.3335


b）小数点の前に、ユーザーが値を入力する必要はありません。ユーザーは整数も入力できる必要があります。

何が問題なのか教えてもらえますか？

おかげで、
ジョリーガイ

javascriptvalidationkeypress
20
Jollyguy

あなたはほとんどそこにいた。小数点の後に2文字を超えないことを確認してください。

更新1-カラット位置をチェックして、小数点の前に文字を挿入できるようにします。
UPDATE 2-ddlabのコメントで指摘されている問題を修正し、1つのドットのみを許可します。

 function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot (thanks ddlab)
    if(number.length>1 && charCode == 46){
         return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
        return false;
    }
    return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

http://jsfiddle.net/S9G8C/1/
http://jsfiddle.net/S9G8C/203/

30
Moob

HTML5のConstraint Validation APIを活用することを検討してください。必ずしも無効な値を入力できないわけではありませんが、フィールドは無効とマークされ、<form>（デフォルト）の送信を停止します。 <output>を追加して、ブラウザがたとえば「1.100」は有効な値です（数値は「1.1」と見なされます）。

<input id="n" type="number" step=".01">

var
  n = document.getElementById('n'),
  o = document.getElementById('o'),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener('input', didInputN);
input:invalid {
  color: white;
  background-color: red;
}
<input id="n" type="number" step=".01">
<output id="o" for="n"></output>

哲学的には、ユーザーが無効なエントリを貼り付けてフィールドで直接編集できるため、これをより使いやすいアプローチと見なすことができます。

11
Nate Whittaker

Onchangeイベントを使用して別の方法でそれを行うことができます。ユーザーに入力を制限するのではなく、入力後に数値を変換するだけで、このように統一します。

_function validateFloatKeyPress(el) {
    var v = parseFloat(el.value);
    el.value = (isNaN(v)) ? '' : v.toFixed(2);
}_
<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />

_45.846_は_45.85_である必要がありますが、コードではユーザーは自分自身を変換する必要があり、その後_45.85_と直接入力します

8
Niklesh Raut
1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).

これが役立ちます。 jsFiddle

1
surendra babu
 function decimalValidation(el, evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       var number = el.value.split('.');
         if(charCode == 8) {
          return true;
         }
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        //just one dot
        if(number.length>1 && charCode == 46){
             return false;
        }
        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
            return false;
        }
        return true;
    }

function getSelectionStart(o) {
    return o.selectionStart
}

こんにちは@webvitaly上記のコードはIEでも動作します。

1
user5886482

私の問題は、ユーザーに小数点以下2桁しか許可されていない場合、リアルタイムでエラーメッセージを表示する必要があることです。

value = parseFloat(valueFromInput);
parseFloat(value.toFixed(2)) !== value // condition to check

上記のコードは私のために働いた。.toFixedは、浮動小数点数を小数点以下2桁のみの文字列に変換します。同じ値である場合は、初期値で確認するために浮動小数点数に戻す必要があります。

追伸この条件の前に、値がNaNであるかどうかを確認する必要があります。

0
Alin Ciocan

このコードは非常に完成しているため、「。」を変更します。 「、」へ：

  • 開始できません

  • これ以上「、」を書き込めない

    <script type="text/javascript">

    function isNumberKey(evt, el) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split(',');
        var caracter = el.value;

        if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        if (charCode == 44 && caracter == "") {
            return false;
        }

        if (charCode == 44 && caracter.indexOf(",") != -1) {
            return false;
        }

        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(",");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
            return false;
        }
        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

</script>
0
Eron Fontes