Tuesday, December 10

How to disable the mobile keyboard from displaying on click of the input field

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

I was recently working on a Shopify website where there was a filter on the products listing page. I found an issue that on click of that filter it was opening keyword on the mobile screen. I debugged and found that it’s a bootstrap filter and creating an input box automatically at run time.

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.

// Using ID field
$(‘#input_id’).attr(‘readonly’,’readonly’);

// Using class name
$(‘.input_class’).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!

5 1 vote
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x