覆盖网站上文本输入区域的默认移动设备键盘吗？ （HTML / JS / jQuery的）

Question

I have been given a task, which up to this point I think might be impossible. I am wondering if it is at all possible to override a default system keyboard for input in a text input area (on mobile devices).

Assume the OS is Android. Is there a way for a mobile website to not show the default system keyboard when clicking on a text input area? I know a little bit about programming, so I know this is possible with Java inside of an app, but that's beyond the scope of this particular issue.

IE, say you have a numeric input field on a website. Can you instead use some form of Javascript (like onFocus, onBlur, etc.) or media queries to display a custom pop-up keypad for data entry and somehow tell the device not to display it's default text entry method?

There are a few other issues I've read regarding a jQuery datepicker where it is possible to hide the keyboard by making the element read-only or similar, but the problem is that my element still needs to be able to accept an input.

The only other similar issue I've found is here . Alas, it also has no answer.

For what it's worth, this task is math-related, where the pop-up keypad entry will provide limited answer entry possibilities that pertain only to the question, whereas a full keyboard is not needed and often overkill for the task at hand.

EDIT: also, forcing a pure numeric input keyboard is not an acceptable solution, since the input (in some cases) will require fraction bars and/or variables, such as x and y .

Answer 1

You can mark your input field read only in modern browsers, eg

<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />

You can set a focus and cursor, but not edit this input (no default menu will popup). Now you can built your custom keyboard and use js to set the corresponding value. Sounds quite easy, but it's not- you have to make sure the input field stays visible during input and therefor maybe have to rethink your page layout.