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

Colleagues in the production of touch screen when the product such a demand: " our page Why click the TextArea box, in the space, the iphone's keyboard can not hide?" "

We have tested this problem and it is not hidden. Look at other sites of the page, but also some can hide some can't hide.

Why didn't textarea lose focus when the iphone clicked on the document?

The same problem I tested on the Android system can be automatically hidden, only the iphone has this problem.

So the Internet search related methods to show hidden keyboard methods are based on the app and no JS, it seems necessary to solve their own hands.

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 won't trigger it.

That means you can't lose focus when you click on the blank document in the iphone textarea.

Using touchscreen events

Since click does not trigger an iphone event, you need to find a touchscreen event to trigger it once:

Ontouchstart
Ontouchmove
Ontouchend
Ontouchcancel

Finally I choose to use Ontouchend, the finger off the screen when triggered.

Think of the Way 1: Click a tag can let textarea lose focus

When textarea gets focus, clicking a tab lets textarea lose focus and hide the iphone's keyboard.

The realization of the idea is:

1.textarea when the focus is obtained

2. Create a label when Ontouchend moves to the document blank, simulating the click event of a label

3.textarea loses focus, hides iphone's keyboard

This method wants to come out simple experiment, feel too egg ache, direct pass off ...

Think of the way 2: let textarea actively lose focus

1.textarea when the focus is obtained

2. Add a Ontouchend event to the document to determine if the currently clicked element is textarea itself if not textarea will lose focus

3.document Removal of Ontouchend events

Feel or This method is reliable, finally follow this idea to solve.

Final approach

1. The level two event for IE is not used because it is used on the touch screen.

2. Made a judgment that only triggers on the iphone.

3. At that time, colleagues said that the method of implementation too fast, the customer too late to respond to the keyboard is hidden, and then added a time parameter for settimeout settings.

Determine if apple var isiphone = Navigator.userAgent.toUpperCase (). IndexOf ("IPHONE")!=-1; Element loses focus hides the iphone's soft keyboard function Objblur (id,time) {    if (typeof ID!= "string") throw new Error ("Objblur () parameter
Number of errors ");     var obj = document.getElementById (id),         time = time, &N bsp;       doctouchend = function (event) {             if (event.target!= obj) {                 settimeout (function () {         
            Obj.blur ();                   
  Document.removeeventlistener ("Touchend", Doctouchend,false);                },time);            }        }
;
    if (obj) {        Obj.addeventlistener ("Focus", function () {             Document.addeventlistener ("Touchend",
Doctouchend,false);
       },false);    }else{        throw new Error ("Objblur () no element found");     } if (isiphone) {    var input = new Objblur ("input");     Input=null}