If i create a div that has contenteditable true inside of an iframe and if you double click it it becomes non functional.the focus is still in the iframe and you can see the cursor, however it does not respond to keydown
Does anyone have an idea of how I can i overcome this?
EDIT:
i have implemented a dojo editor. if you open this link in ipad you will see the problem as described above.
Which OS you are using? You should make sure that you are using OS 5.0 or later. According to the (Apple's Technical Notes) and Safari Web Content Guide. It is written:
The HTML contenteditable attribute is supported in iOS 5.0 and later. In earlier versions, replace contenteditable, used to enable text input within a styled element, with a styled textarea element. In Safari, you can customize the appearance of textarea elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a textarea element by setting -webkit-appearance to none.
So, if you are using an old OS version, you could use textarea elements instead of contenteditable. Then, it is guaranteed that your application will work as well.
PS. you can use your IPAD to go on this website, to try how does it work with textarea. It might be an example for you.
Hope that helps.
Trying to get a contenteditable div to work inside of an iframe is one level of complicated, if you are trying to get it to work inside of a specific WYSIWYG editor like Dojo editor, is another level harder, as there is a lot of JavaScript affecting the interactions. It would help to explain the parameters a little better in your question.
Have you used a browser debugger (like Firebug) to see what's happening when you click?
This other SO question and answer about contenteditable div vs iframe is useful.
Finally, if you are using iOS Safari, make sure you are using Safari 5.0 or better as the contenteditable attribute was only recently supported on that browser.
EDIT:
Since you are using iOS 6, you should be using the iOS Safari JavaScript Debugger to let you know what's happening a little more clearly when you click on the editable div. If you can find some more specific error messages, please update us.
Related
This will be difficult to explain so I won't paste any code.
I'm implementing a wysiwyg editor on my site called wysihtml5 and there are several issues when selecting the textarea/editor with the iPad. On a desktop browser, all is fine, the text can be selected, edited, pasted etc. But on the iPad multpiple issues occur:
Can't tap anywhere in the text to move the cursor there
If I manually move the cursor, all of a sudden I can't type anything anymore
Tapping outside of the texteditor doesn't bring the keyboard down
Basically I'm just hoping there's someone who has had similiar experiences with iPad cursor not behaving correctly in text input fields and what possible solutions there might be. I'm stuck and have no idea how to debug this.
Did you use touch event? iOS has a bug: you can't input in editable iframe if you are listening(or had listened) any touch event(touchstart, touchmove...), I tested this bug occurs even you listen other elements but iframe itself. yes, it's a serious bug, you can check out:
wysihtml5 issues98
Background/Context:
I am developing touch screen based kiosk application with JavaFX. The app integrates browser – WebView. The problem is that all user inputs have to be made through on screen keyboard (SW keyboard)
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
Even though I searched the Internet, I did not find this kind of feature.
My questions:
Does JavaFX / WebView provides any support for these cases?
If you were to tackle this problem, what would be your approach to that?
My solution so far:
I have a small button (at one corner of the screen) that allows user to show/hide on-screen-keyboard. Since they have to do that manually, it is quite annoying. Especially on sites where browsing (consuming information) and text inputs changes frequently.
It would be nice to have an option to register an event-handler on WebView/WebEngine for any HTML text input element got/lost focus, so that I could show/hide on-screen-keyboard.
A potential strategy for doing this:
Start with a jdk8 preview.
Run the application with -Dcom.sun.javafx.isEmbedded=true to enable the virtual keyboard.
Use a webengine.executeScript technique to embed jQuery into the target page.
Bind a jQuery focus handler to the relevant html elements.
In the jQuery focus handler make an Upcall from JavaScript to Java.
Upon receiving the upcall make use of JavaFX's Virtual Keyboard.
As the user enters values into the keyboard, make executeScript calls to set the value of the corresponding html field.
Some parts will likely be a bit (or totally) flaky, but perhaps other parts may prove useful to you.
In the future, if WebView is supported on touchscreen platforms on embedded devices, I'm guessing that out of the box it will work well with a virtual keyboard.
SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.
We have code that loads SVG via Ajax and then interacts via Javscript. Under Mozilla, and under Safari 5, running on a PC we get click events as expected in SVG. Running Safari iPad we don't get click events. According to the Safari developer guide:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
it looks probable we should be 'Making Elements Clickable.' Apple's guide suggests one does this by adding an onclick handler. The problem is all our SVG elements already have a click handler set up via jQuery - and they still don't click.
Maybe this is because SVG is not HTML, and SVG's DOM access is not HTML DOM's access? (We've been here before.)
How do we get the iPad to listen for events on SVG elements?
To my knowledge, there is a problem with safari according this javascript - which handles canvas/SVG
It seems that click and touch is not the same.
https://github.com/kangax/fabric.js/blob/master/dist/all.js
And SVG 1.1 does not have other than click events
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
I have the same interest, therefore I seek the same information ...
I was able to get click events working on Ipad using jquery and javascript. but my issue is that the svg blurs on an iPad.
My svg is embedded in an html object, then I just access it by calling a normal click event referenced to a function that access the svg component through:
window.top.document.getElementById('elementId');
For single form UI's the form assistant in the mobile safari virtual keyboard doesn't provide much value and reduces the useable space in the viewport. Is it possible to remove this section of the keyboard for forms that do not benefit from this?
In essence, you must wait till the keyboard responds and then forcibly grab and remove that top bar. It's not pretty and definitely not perfect but it is a starting place. I'll post the refinement of this process as I work on it myself.
Here is the question. I implemented this using Trigger.IO and native plugins but, naturally, you can ignore that and just run it on your UIWebView: How can I hide Form Assistant with iOS native plugins using Trigger.IO?