Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to prohibit mobile phone virtual keyboard from popping up in html5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Click the input box to pop up the custom pop-up window, and the input box is the input tag.

But on the mobile side, input will trigger the phone's virtual keyboard by default, how to prevent the phone's virtual keyboard from popping up? I have tried two scenarios so far, one is to add the readonly attribute to input, and the other is to add a sentence document.activeElement.blur () in front of the input event handler.

Readonly

Using readonly to prevent virtual keyboards from popping up should be the easiest and most elegant way. The readonly property specifies that the input field is read-only. Read-only fields cannot be modified. However, users can still use the tab key to switch to the field and select or copy its text.

It is worth mentioning that its value, as long as the readonly attribute is declared, no matter what value can be taken, such as readonly= "", readonly= "readonly", readonly= "abc" are the same.

Pros: simplicity

Cons: invalid in iOS's Safari (no more situation tests)

Document.activeElement.blur ()

What is this? Document.activeElement is a Web API interface. The explanation on MDN is that it returns the element on the current page that gets focus, that is, if the user presses a key on the keyboard at that time, a keyboard event is triggered on that element, and the attribute is read-only.

The document.activeElement attribute always references the element in the DOM that is currently in focus. Elements can be focused by user input (usually by pressing the Tab key), calling the focus () method in code, and page loading.

There are many methods in it. If you check it in the browser console, you can see that there are many methods.

So why can document.activeElement.blur () prevent the virtual keyboard from popping up? The reason is: when you click input, document.activeElement gets the focused element in DOM, that is, the input you clicked, and calls the .blur () method, blur, which I'm sure you all know is to unfocus. Get the focused element and then force the blur to make it look like it is not focused, and feel around it.

Advantages: support for Android and iOS

Cons: need to add additional JS code

Where is this code added? The following HTML is added:

Then this JS is added to the event handling method:

$("# datePicker") .focus (function () {document.activeElement.blur ();}); this is the end of the article on "how to prohibit mobile phone virtual keyboard from popping up in html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.