web-dev-qa-db-ja.com

GWTのテキストボックスに数字のみを許可しますか？

テキストボックスに数字のみを許可する必要があるという要件があります。ユーザーが数字以外の文字を入力しようとした場合、イベントをキャンセルする必要があります。これを達成する方法を教えてください？

ありがとう！

gwt
21
user1016403

特定のイベントでのユーザー入力を検証するだけです。たとえば、すべてのキーストローク（KeyPressEvent）、TextBoxがフォーカスを失ったとき（ValueChangeEvent）、ボタンを押したとき（ClickEvent）など。イベントハンドラを実装します。 KeyPressHandlerを作成し、実装をTextBoxに登録します。次に、ハンドラーでTextBox値を検証し、それが数値以外の何かを含んでいる場合は、メソッドから戻るだけで、おそらくユーザーに値が無効であることを伝えます。

このようなもの：

final TextBox textBox = new TextBox();
textBox.addKeyPressHandler(new KeyPressHandler() {
    @Override
    public void onKeyPress(KeyPressEvent event) {
        String input = textBox.getText();
        if (!input.matches("[0-9]*")) {
            // show some error
            return;
        }
        // do your thang
    }
});

多くの検証が必要な場合は、ホイールを再発明する手間を省く検証フレームワークを導入したいと思うでしょう。最近はもっと良い代替案があるかもしれませんが、個人的には GWT-VL検証フレームワーク に非常に満足しています。

14
toman

以下はより一般的なアプローチであり、コードの再利用を可能にします。 NumbersOnlyハンドラーは、（同じクラスの）任意のテキストボックスに使用できます。

intbox1.addKeyPressHandler(new NumbersOnly());
intbox2.addFocusHandler(new OnFocus());


//inner class
class NumbersOnly implements KeyPressHandler {
        @Override
        public void onKeyPress(KeyPressEvent event) {
            if(!Character.isDigit(event.getCharCode()))
                ((IntegerBox)event.getSource()).cancelKey();
        }
    }
12
bmoran
class NumbersOnly implements KeyPressHandler {

        @Override
        public void onKeyPress(KeyPressEvent event) {
            if (!Character.isDigit(event.getCharCode()) 
                    && event.getNativeEvent().getKeyCode() != KeyCodes.KEY_TAB 
                    && event.getNativeEvent().getKeyCode() != KeyCodes.KEY_BACKSPACE){
                ((IntegerBox) event.getSource()).cancelKey();
            }
        }
    }
7
tumbudu

番号をコピーする可能性など、他の例外を追加しました。それでも、クリップボードからの貼り付けはできません。

public class NumbersOnlyKeyPressHandler implements KeyPressHandler {
    @Override
    public void onKeyPress(KeyPressEvent event) {

        switch(event.getNativeEvent().getKeyCode()) {
        case KeyCodes.KEY_TAB: 
        case KeyCodes.KEY_BACKSPACE: 
        case KeyCodes.KEY_DELETE: 
        case KeyCodes.KEY_LEFT: 
        case KeyCodes.KEY_RIGHT: 
        case KeyCodes.KEY_UP: 
        case KeyCodes.KEY_DOWN: 
        case KeyCodes.KEY_END: 
        case KeyCodes.KEY_ENTER:
        case KeyCodes.KEY_ESCAPE:
        case KeyCodes.KEY_PAGEDOWN:
        case KeyCodes.KEY_PAGEUP:
        case KeyCodes.KEY_HOME:
        case KeyCodes.KEY_SHIFT:
        case KeyCodes.KEY_ALT:
        case KeyCodes.KEY_CTRL:break;
        default:

            if(event.isAltKeyDown() || (event.isControlKeyDown() && (event.getCharCode() != 'v'&& event.getCharCode() != 'V'))  )
                break;

            if(!Character.isDigit(event.getCharCode()))
                    if(event.getSource() instanceof IntegerBox)
                        ((IntegerBox)event.getSource()).cancelKey();
        }
    }
}
5
Blakhar

TextBoxを IntegerBox または LongBox のいずれかに置き換えます。

これは、意味的に数字のみを許可することと同じではありませんが、ほとんどのユースケースで間違いなく優れています。また、入出力の整数解析が無料で行われます。

3
djjeck

これを試してください：

public void onKeyPress(KeyPressEvent event) {
    if(event.getNativeEvent().getKeyCode()!=KeyCodes.KEY_DELETE && 
        event.getNativeEvent().getKeyCode()!=KeyCodes.KEY_BACKSPACE &&
        event.getNativeEvent().getKeyCode()!=KeyCodes.KEY_LEFT &&
        event.getNativeEvent().getKeyCode()!=KeyCodes.KEY_RIGHT){
            String c = event.getCharCode()+"";
            if(RegExp.compile("[^0-9]").test(c))
                textbox.cancelKey();
    }
}
2
Shishir Mane

あなたはjavascriptメソッドを通じてそれを検証することができます：

function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }

あなたのテキストボックスはこのようになります

<input class="txtStyle" type="text" autocomplete="off" onkeypress ="return isNumberKey(event);" />
1
Salman

私は同じ問題を抱えており（多かれ少なかれ同じものであるIntegerBoxを使用しています）、次のようにしました。

    fieldName.addKeyPressHandler(new KeyPressHandler() {            
        @Override
        public void onKeyPress(KeyPressEvent event) {
            // Prevent anyone entering anything other than digits here
            if (!Character.isDigit(event.getCharCode())) {
                ((IntegerBox) event.getSource()).cancelKey();
                return;
            }
            // Digits are allowed through
        }
    });
0
Old Nick

ValueBoxは、入力をフィルタリングするように設計された主なものではありません。どうして？ユーザーがデスクトップキーボードのキーを押すと、アプリがANRに入るか破損するので、そうですか？それは、キーセットのタイプが分かれている電話ではありません、そうですか？したがって、ここでの唯一の解決策は、間違った文字を入力したことを人々に知らせることです。サンプルコードを提出させてください：

IntegerBox field = new IntegerBox();
        field.setStyleName("number_ok");
    field.addKeyUpHandler(event -> {
        String string = field.getText();
        char[] harfho = string.toCharArray();
        for (char h : harfho) {
            try {
                Integer.parseInt(""+h);
            } catch (NumberFormatException e) {
                field.setStyleName("number_error");
                return;
            }
        }
        field.setStyleName("number_ok");
    });

そしてCSSで：

.number_error{
  background-color: red;
}
.number_ok{
  background-color: transparent;
}
0
CodeToLife