Show numeric keypad in WebView

Question

I have a webview where I manually show the keyboard on the login screen and focus on the input field.

field:

<input type="password" maxlength="4" pattern="[0-9]*" id="pin"> 

Keyboard focus and display:

 webView.requestFocus(View.FOCUS_DOWN); webView.loadUrl("javascript:document.getElementById('pin').focus();"); InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE); imm.showSoftInput(webView, InputMethodManager.SHOW_IMPLICIT); 

The login screen consists of only a PIN code field in which the user enters 4 digits. The problem is that by default it shows a regular alpha keyboard, and I want it to display a numeric keyboard instead. I have seen many examples of using EditText properties to control keyboard type, for example.

 InputMethodManager mgr = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); EditText.setInputType(InputType.TYPE_CLASS_PHONE); [select Input type as according to ur requirement] mgr.showSoftInput(EditText, InputMethodManager.SHOW_IMPLICIT); 

But can you tell the keyboard itself what type to show or set the attribute in the WebView?

Answer 1

This route worked for me. Subclass the WebView and override the onCreateInputConnection method. This method is called when an input field in WebView , and it gives you the ability to customize how the event is handled. Here is an example:

 @Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) { BaseInputConnection ic = new BaseInputConnection(this, true); outAttrs.inputType = InputType.TYPE_CLASS_NUMBER; // Tells the keyboard to show the number pad return ic; } 

Answer 2

Using code that offers a different answer works fine on my device (Galaxy S4) and emulator. However, when you launch the application on another HTC device, the number keys do not work.

Change the code to the following:

 @Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) { InputConnection ic = super.onCreateInputConnection(outAttrs); outAttrs.inputType = InputType.TYPE_CLASS_NUMBER; return ic; } 

worked on all the devices that I have.