I'm currently trying to get rid of a problem within an application that is supposed to highlight selected textpassages in a document.
The application is working fine in desktop browsers but is currently having trouble with mobile versions because the browsers(IE 11 mobile) text-selection works differently.
The problem seems to be that the actual selection in the mobile version comes after the mouseup-event that is used to catch the selections. Because of this, the selections aren't updated properly until the next mouseup-event on the document and aren't updated at all if the next mouseup-event happens to take place outside of the document-area.
Right now I'm looking for something like an event that is triggered after the selection or an event that is triggered before a textpart is losing its selection.
So far I've tried most pointer- and touch-events (mostly variations like touchstart, -end, -leave, pointerdown, -out and -up). Further researches only led to selection-events for forms and input-fields which isn't what I'm looking for.
Are there any suggestions for events or workarounds that suit my problem?
Related
I'm looking for a way to track the text selection on a web page. I need some code to be executed whenever there is a change in selection. I have successfully done this on all major desktop browsers, but the same does not seem to be working on Firefox for Android.
I tried three approaches (none of them worked!):
Tried catching the "mouseup" event and checking if there is a
non-empty text selection. Problem is "mouseup" isn't getting
triggered if a selection was made during the mousedown-move-up
sequence!
Tried doing the same with the "touchend" event - Same result.
Tried catching the "selectionchange" event. I saw that it isn’t
triggered when the selection changes as it needs the config key
"dom.select_events.enabled" to be set. This is false by default and I obviously can't ask my visitors to tweak browser settings :-)
Also, as expected, the first two events don't get triggered if the selection is extended or reduced by dragging the selection start/end markers.
The only solution I can think of now is a periodic poller (using setInterval) that checks if there is a text selection. This is definitely unclean and anti-performance.
Any alternatives and/or advice will be very helpful.
1) Native Text Selection Events
Currently, polling seems to be the only work-around.
However, the selectionchange event is currently experimentally implemented in Firefox for Android Nightly. It can be enabled by setting the dom.select_events.enabled flag to true (defaults to false).
In Nightly builds, this flag already defaults to true, so there is a chance you can use it normally in a couple of months.
2) Find events that work
(UNTESTED!!)
Even if onselectstart cannot be used productively in Firefox for Android yet, the only viable easy solution is polling.
To improve performance and reduce costs, polling can be started on the window blur event. Because whenever the user is making a selection, the focus should be set off the viewport (untested though).
window.addEventListener('blur', function(){
// start polling for text selections
});
When the focus is given back, polling can be stopped.
window.addEventListener('focus', function(){
// stop polling
});
To check if the browser actually supports text selection events, you can use this function:
var browserSupportsTextSelectionEvents = function(){
return !!('onselectstart' in document.body);
}
3) Hacking
A third idea is to disable text selection for mobile Firefox users via CSS (-moz-user-select: none), implement a custom text selection function based on touch start and end positions and pushing the native selection range back to the browser via HTMLElement.setSelectionRange().
I am developing a web application. This application due to requirement contains a table with 500+ rows (unpaged). The application is very interactive and so we're using KO behind the scenes.
That said I am noticing that occasionally tabbing on an input text box, does not take you to the nearest text box, instead it takes you to the first input text box on the page. When this happens a couple of things also happen:
The blur event does not trigger.
The focusout event also does not trigger. I have had to work around the issue by detecting mouse click and fire the events off manually using jQuery.
Unobtrusive validation will not work.
View model is not bound ie. changes on the input box is not reflected on the KO view model.
The issue is intermittent, I cannot necessarily reproduce it consistently, but it is happening frequently - and considering money is involved in this application I need this to work 100%.
Also testing the same application on Chrome and Firefox works perfectly. No intermittent issue as detected on IE9 and 10. Is there a known browser bug around this issue? Or am I just missing something?
I am working on a contenteditable div to make a simple RichText-Editor. One of the requirement I have is to be able insert html chunk at cursor postion on a button event.
I was able to get that part working fine by using range, selection, range.insertNode(nodeHTML) or range.pasteHTML(nodeHTML) based on browser. But I couldn't get two things, which ideally I would like to have
To be Able to undo the inserted node, using browser's undo. Somehow, browser ignores above actions.
To move the cursor at the end of inserted node. So that user can start writing after
I know I can use something out of many editors available, which does this very well, but If I get this I would not have to. Any help or even suggestions are welcome.
Thanks.
Answer rewritten August 2013
Unfortunately not, although things are improving. Programmatic DOM mutations other than those triggered by document.execCommand() do not go on the browser's built-in undo stack. However, there have been two recent developments:
IE 11 has new ms-beginUndoUnit and ms-endUndoUnit commands
There is a spec in the works for an undo stack available to web developers, parts of which have been implemented in WebKit and Firefox (note: it's disabled by default in Firefox and apparently also in WebKit).
Until the situation improves, you could use document.execCommand("InsertHTML", false, "<b>Some html</b>"); but this is not supported in IE.
We have chosen the Opera Mobile for one PDA application, everything went well until we hit a problem with regards to taking a scanned input to one of the text fields.
The general way you'd approach this problem is by setting one textBox to have focus when the scan operation is performed.
UNFORTUNATELY, intentionally or unintentionally Opera is not supporting this. The focus is no-where when you enter in to the screen and there is no way of explicitely setting it. Worst comes next, you cannot detect the key-press events too, which makes it virtually impossible to take the input event from the scan operation.
I have no clue why Opera, one of the best acclaimed mobile browsers, does not support this.
These are the places the same question is asked over and over again,
http://dev.opera.com/forums/topic/255066
http://dev.opera.com/forums/topic/650332
http://dev.opera.com/forums/topic/384311
We have posted in the Opera Dev forum as well and it seems that they (so far) have no solution for this. If anyone has tried a workaround, we would be interested to hear the solution.
And please note that the solution in here is not working in Opera Mobile 10. I have not tried it in the proposed 9.X version.
I found it myself. And here is how to do it.
Have a hidden button in the form
input type="button"
id='myHiddenButton' visible='false'
onclick="javascript:doFocus();"
width='1px' style="display:none"
Have a javascript to get fired on the click event of the hidden button.
function doFocus() {
var focusElementId = "MyTextBox"
var textBox = document.getElementById(focusElementId);
textBox.focus();
}
Have the button clicked using a javascript at the end of the document
function clickButton() {
document.getElementById('myHiddenButton').click();
}
setTimeout("clickButton()", 100);
I have a series of select elements in a form on a mobile site. These select elements are inside a scrolling pane handled through JS and CSS3 transforms, so getting a touch/click/whatever event to register on the selects was enough of a pain in the first place. However, I'm now finding, on android only, that even though the selects are getting clicked, and are getting focus- they simply refuse to open. I'm 100% sure that the selects are getting their focus event (through debug), so honestly, I am completely stumped. Without the debug, there are no other focus/blur events on the selects. It works fine on iPhone... any ideas?
I've been banging my head against the wall with this same issue. It seems to be isolated to Android 2.1/2.2 (and maybe 2.0?). The selects work fine in Android 1.5/1.6. I even created a simple page that just changes the select's display style from none to block and the select still doesn't open consistently. Oddly, sometimes after page refresh it might work, then after another refresh it might be broken again. As you stated, focus and click/touch events do fire from the element, so I'm at a loss as to what the issue is.
Sometimes if I zoom the page I can get the select to open, but even then the value selected isn't represented in the select element on the page.
I submitted a bug report to the Android dev team, but even if it's fixed in future builds the problem will still exist in 2.1/2.2.
Anyone find a workaround for this yet?
//---- Update ------
If you use a webkit-transition to show/hide the element, attaching the following event to the element appears to fix the select inside of it:
.addEventListener("webkitTransitionEnd",function(e){
this.innerHTML = this.innerHTML;
},false);
I'm not entirely sure why this works, but re-writing the element to the DOM seems to help for some reason. Tested in Android 2.1/2.2 simulator, EVO4G and MyTouch.
I found the solution in this answer by a.meservy. Here is the answer, copied for everyone's convenience.
In this case the problem was actually caused by jQTouch. To fix it, just comment out these 4 lines in jqtouch.css
Under "body"
/*-webkit-perspective: 800;*/
/*-webkit-transform-style: preserve-3d;*/
Under "body > * "
/*-webkit-backface-visibility: hidden;*/
/*-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);*/