wysihtml5 icon indicating copy to clipboard operation
wysihtml5 copied to clipboard

Unable to blur editor on iOS

Open nevf opened this issue 12 years ago • 7 comments

I want to stop editing when the user touches outside of a wysitml5 editor on an iPad etc. On the Desktop clicking outside of the iframe does a blur and editing stops, however this doesn't work on iPads. I've added:

$(document).on( 'touchstart', function( event ) {
    editor.currentView.element.blur();
    // also tried
    editor.composer.iframe.blur();
    editor.currentView.doc.activeElement.blur();
    etc...
});

Where document is the document containing the editor. None of my many attempts trigger an actual blur event in the editor. editor.fire( 'blur' ); fires a blur, however the textarea doesn't see a blur event and still has focus.

The only way the user can stop editing is by closing the iPad virtual keyboard, which triggers the usual blur event.

-Neville

nevf avatar Jan 16 '13 23:01 nevf

I am having the same problem here.

There is no way to trigger the focus to go away from the editable region. I have tried many different techniques and many hours trying to figure this one out.

On my page when the user hits the save button, which should trigger blur the page saves and moves on to the next page with the keyboard still open and the caret floating on the page where it thinks the iframe was.

I started to debug your source but didn't get completely through yet.

Some things I tried:

.find('iframe').contents()[0].activeElement.blur();
.find('iframe').contents().parent().focus();

$('#inputId').focus().blur();

 document.activeElement.blur();
 $('iframe').blur();

Also tried simulating a tap or click on another element on the page and it still doesn't like that. Only way to close, like said above, is to manually hit the keyboard.

Coming from CKEditor, this was working there and that also uses iframe

hummerpj avatar Mar 06 '13 05:03 hummerpj

+1

jerryorr avatar May 14 '13 20:05 jerryorr

FYI - I found that this was a good workaround: http://stackoverflow.com/a/8949885/1138751

Basically, create a pseudo-invisible input (can't be display:none or visibility:hidden, but can be size: 0; opacity: 0). To blur the editor and close the keyboard, just focus() then blur() on the input.

jerryorr avatar May 15 '13 01:05 jerryorr

@jerryorr Thanks for that - I'll try it when time permits.

nevf avatar May 15 '13 01:05 nevf

+1

Im going to do the workaround but it would be nice to have this feature implemented on the plugin

silviomoreto avatar Aug 26 '13 19:08 silviomoreto

The workaround didnt work for me.. What Im doing is: - Click on the wysihtml textarea element - Click outside

The keyboard keeps appearing and I am unable to continue writing.

silviomoreto avatar Aug 26 '13 19:08 silviomoreto

I have the same problem. Any solution?

yibuyisheng avatar Jan 08 '15 03:01 yibuyisheng