When you tap and hold on a link inside a UIWebView (or mobile safari), it highlights the link in a gray text box.
You can control the styling of this with the webkit-tap-highlight css property.
What I'd like to know is if it is possible to either:
A. Listen to an event for when something is highlighted.
B. At a given time, find any elements that are currently highlighted.
Is this currently possible?
Looks like this guy figured it out using window.getSelection() and text.anchorNode.textContent.substr(text.anchorOffset, text.focusOffset - text.anchorOffset):
http://zaldzbugz.wordpress.com/2010/05/31/how-to-get-the-highlighted-text-in-uiwebview/
This article was also chosen as a working answer in another StackOverflow post.
Although the iPhone is a touch device, the mouseover event will be triggered when the element is highlighted. So, you can use javascript to listen the mouseover event.
Related
I'm running into this problem on Chrome. When I use jQuery to focus on an HTML input with part of its text selected, my page jumps to the top instead of the element itself. I've created the following jsfiddle as an example:
http://jsfiddle.net/wzs821jg/3/
I've put margins above and below each input, enough to create a scrollbar. If your resolution is taller than mine (I'm on a laptop) and you have no scrollbar, just add more margin until you do.
Add enough text to the second input to cause it to scroll (overflow on the x). You can just add jibberish, such as "asdfkasdkjfhakjsdhfaksdjhfkajshdkfajshdkfajshdkfjah", which should work fine. Once you've gotten enough text, highlight a portion of it. Now there are two methods you can use to cause the page to scroll to top:
Click the button, which has a short jQuery listener that will focus on the second input.
Focus the first input and then press tab to focus the second input
On Chrome Version 41.0.2272.101 (64-bit) on OSX Yosemite, both of those actions should cause the window to jump to top instead of focusing on the second input. I've tried on Safari, and I can't recreate the issue. I've experienced different behaviors depending on where you select the text (outside, inside, or across the overflow) and the method used to focus. Play around with it a bit.
My question is: is this a problem with Chrome or am I doing something wrong?
Edit: I've filed a bug report with Chrome pointing to this question. Unless someone has an answer, I'm just going to assume it's simply a bug within the browser.
Is this possible? I don't have an example of what I'm asking about obviously, but essentially what I want to do is to have users be able to drag an element around a page, but not have it be restrained to certain positions like drag and drop-able elements in HTML5. The simplest example would be the way windows work on the desktop. I'm sorry if the answer is out there, but I don't know the term to search for.
Sounds like a job for jQueryUI!
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
https://jqueryui.com/draggable/
I am tracking the mousedown state and not only does Secondary mouse button click trigger the mousedown event while failing to deliver on a mouseup event, so does the situation of dragging on something selected (note this is different from dragging to select).
I am currently experiencing this on Safari 6 on a Mac and I'll report back if I see it on other platforms/systems.
Is there a way to intercept this so that my JS program can be not confused about what's going on? For the secondary button situation I simply check event.which === 3 in my handler and just don't mark my button as down, and that takes care of that, but I am using the left button to initiate drag on a selected bit of text as well..
I am not sure I understand what you want to do, but checking which button has been pressed may involve a bit more work other that checking the which property.
Have a look this quirksmode page. The rightclick section contains some code that may help you.
A very thorough explanation on mouse events is also available here. It can really help you deal with browser quirks.
The specific issue here is that mousedown is not triggered when dragging a selection.
The solution is to simply prevent selection where it may become problematic.
I have a scenario where I have some text, which should be user-selectable. The problem is, that there's an UI overlay on top of it, which prevents selecting text by default. The logical way to keep the overlay and still be able to select the text, would be to use synthetic events (use document.createEvent), but due to some reason, it doesn't work as expected.
The events seem to be delegated correctly and fire their handlers, but no text is selected. I have an example here, which is a rough simplification of the problem.
A few notes
In Firefox if you start your selection outside of the overlay, you are still able to select the text you want, even if it's under the overlay
When you have a normal selection in the uncovered area and you click on the overlay, it would be expected from the delegated mousedown event to remove the selection, but it doesn't happen
Am I missing an event that should also be delegated (I have mousedown, mousemove and mouseup)? Or is it some kind of a security measure by browsers to disable such behavior (refer to the note nr 2)? Any other suggestions on how to get the desired result? I know I should work around the current overlay solution altogether, but I'm already curious about the problem itself.
I have found two solutions for this problem:
"pointer-events" css property. Requires IE 9.0+ though.
Seems like guys from ExtJS solved it by event forwarding: demo, source, blog post
I would suggest to do the easy trick: put the transparent element with the same content as your text on-top of text itself and overlay. Here is the demonstration.
P.S.: From my experience any solution in the form you suggest will be awful. It will suffer from browser incompatibilities, side-effects of surrounding mark-up and styling etc.
http://msdn.microsoft.com/en-us/vcsharp/aa336760#WhereSimple1
On this page, when the code part being highlight and release mouse, the popup with code will appeared, is it javascript. how to code this ?
Probably attach an event listener to onmouseup and check to see if the currently selected text is within the element, and if so, show the popup, populating it with the selected text. Most of that is pretty straightforward, but the part where you check to see if the text selection is fully contained within your target element will be a bit complex - mostly because you'll be different code for different browsers. For older versions of IE, look at document.selection and document.selection.createRange(). For others (including IE9) look at window.getSelection().