contenteditable no funciona cuando se usa el toque en otro div

Please bear with me, but this is a very specific problem and it requires a bit of background, and is a problem specific to the iPad iOS 5.0

Imagine creating an HTML page that ressembles an IDE. On the left side is an explorer, and on the right side is an edit field that uses the contenteditable field.

Here is a simplified structure:

<div id="left">
<div id="content">
    <div id="editable" contenteditable="true">
    edit here...

Imagine that the left field has hundreds of hello's. I use iScroll4 library to convert those elements into a scrolling system. The scrolling works fine using touch.

Here is the problem. Let's say I refresh the page, I begin editing and adding or removing text. Then I flick the left side to look at another element. If I then touch the edit field I cannot add text.

I added above the content field a link element

<a href="javascript:touched()">touch me</a>

The function touched does nothing, but touching the link somehow changes things so that I can edit the contenteditable fields again. My first impression was, maybe this is a focus issue. So I tracked the focus of the various elements. Nothing. I even for kicks set the focus, and nothing happened.

The I thought, maybe the key sequences where being lost? I added a document.onkey event and all of the keyevents were being captured. I for kicks add a method call to set explicit focus to the editable field. Nothing.

At this point I am completely frazzled as I have no idea why contenteditable becomes unusable. Getting the user to reclick the link to allow focus is IMO a dumb idea. Anybody ran into this problem? Anybody have a solution?

Muchas Gracias

preguntado el 30 de julio de 12 a las 02:07

could it be some kind of a bubbling issue? -

I don't think so because I did check for that as well. Though if document catches the event, you would think that it went to the element as well, no? -

I'm having the same issue. contenteditable does not seem to work with iscroll. Have you had any luck with this? -

1 Respuestas

You could try using CSS pointer-events so that they don't scroll when touching a contenteditable element:


I don't know if this would work with a touchscreen, but it's worth a try.

Respondido 01 ago 12, 23:08

I will try that and give you feedback. Give me about a three weeks. Moved on to other code that needs finishing first before moving back to this code. Thanks. - user1561759

ummmm... I don't know what I was thinking. This should have the opposite effect, not allowing you to edit the contenteditable object, sorry - Zaq

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.