JS controls the Input/textarea element on iOS to hide the keyboard when it loses focus

Source: Internet
Author: User

When a colleague tests a product, it finds that " some pages have finished hitting the input box, and the keyboard for the iOS device cannot be hidden and the focus will not be lost when the dots are blank ."

With this question I tested and found that there was no such problem with Android devices.

So write JS to test the document to add a click event, found the cause of the problem:

Android can trigger the Click event, and the iphone will not trigger.

That is, under iOS devices you can click on the blank document and input will not lose focus.

Workaround:

Now that the click doesn't trigger an iphone event, you'll need to find a touch-screen event to trigger it once:


Objblurfun ("input");

//if the current touch point is not on input, it loses focus .functionObjblurfun (sdom,time) {varTime = time| | 300; varBrowser={versions:function(){ varU = navigator.useragent, app =navigator.appversion; return {Ios:!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/),//iOS terminal }; } (), Language: (Navigator.browserlanguage||navigator.language). toLowerCase ()} if(Browser.versions.ios) {varobj =Document.queryselectorall (sdom); for(vari=0;i<obj.length;i++) {Objblur (obj[i],time); } }} //element loses focus hidden keyboardfunctionObjblur (sdom,time) {varTime = time| | 300; if(sdom) {Sdom.addeventlistener ("Focus",function() {Document.addeventlistener ("Touchend", Doctouchend,false); },false); }Else{ Throw NewError ("Objblur () no element found"); } varDoctouchend =function(event) {if(event.target!=sdom) {SetTimeout (function() {Sdom.blur (); Document.removeeventlistener (' Touchend ', Doctouchend,false); },time); } }; }

JS controls the Input/textarea element on iOS to hide the keyboard when it loses focus

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.