How to disable the mobile keyboard from displaying input field

Have you ever needed a way to disable the mobile keyboard from displaying for a specific input field?

I was recently building out a custom Gravity Form where the client wanted the ability to use plus/minus buttons to increase or decrease their debt amount.

I used the jQuery spinner to create this functionality but when I started testing in mobile, I quickly realized that the mobile device keyboard was displaying when I clicked the jQuery spinner plus or minus buttons.

The solution to this was rather simple and I’d like to share it here for anyone else who is looking for a solution to this problem.

To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below.

$('#input_92_31').attr('readonly','readonly');

Hope this helps! If you are still having an issue, let me know and I’d be glad to help you out. Thanks!