I'm well aware that iOS Safari doesn't support document.execCommand("copy"). However, I would like to make it as easy as possible for iOS users to copy a block of text.
A user can long-press a word on the page, which will highlight the word. They can then manipulate the selection range to highlight the entire text block, but this can be a bit touchy. Once they have the entire range selected, they get a callout balloon with various options, including copy. I'd like to find a way to simplify this workflow if at all possible.
It's possible to create a button to highlight text for a user with one click. But this doesn't bring up the text options bubble. And when the user long-presses that selection, it reselects just a single word.
Is it possible to highlight an entire text block (with the options bubble) on long press? Are there other ways to make the copy/paste easier for users?
Related
First time posting here. I'm working on a mouse-and-keyboard disability device for a course bioengineering course and I've got a feature that I've got no clue how to begin implementing. Basically, I want to be able to "select" which are the K "focus targets" nearest to the cursor, draw boxes around them/highlight them (much like Chrome or Windows does) and, after deciding which "target" I want to select, focus/click that one. The goal is to use eye-tracking software to move a cursor and then blink/contract a muscle to see which are the closest targets (that way you can click on really tiny stuff which would be hard to select otherwise).
Not sure if "focus target" is the right word, I mean "what gets selected next" after you press Tab. If there's some "universal" way of doing this across apps that'd be great, but either a browser-only or Windows-only way would be great. The only workaround idea I've had so far is to press Tab a bunch of times, see what changes appear on screen, use OpenCV to detect on-screen changes and then see which are closest to the cursor, but that means the screen would spaz out and also wouldn't work if there's any sort of animation on the screen.
Thanks in advance!
You can get element by your cursor and then search the dom tree for input, and then you can use javascript to focus on that input
I'm attempting to get the following functionality, but can't seem to find a good way to do it:
There's a textbox where the user inputs some text, for example, "The apple is red." I then want a custom tooltip to appear depending on which word the mouse is hovering over.
So if I mouseover apple, I want to see a tooltip saying Apples are a fruit!, if I hover over red, I want to see Red is a color!, but I don't want anything to happen if I over over either The or is.
Any ideas?
this is (probably) impossible with a normal textbox.
You'd have to use a "contenteditable" element (e.g. div) and wrap words in tags (e.g. span) while user is typing...
Usually tooltips need a target, which must be a html element. I haven't seen a tooltip that you could attach to a single word inside a tag.
I have a simple RichText Editor which contains standard operations (Bold|Italic|Underline, Text Alignment, Font type, color and size). I am using execCommand function in JavaScript (more info). So the command buttons are toggle buttons and when the mouse pointer is on the bold text (for example) how to make toggle button pressed. With other words - Has anyone idea how to get applied commands on the text to change the toggle button states. If I am not sufficiently detailed, ask me.
Thanks for reading :)
This one's a challenge:
Suppose you have two text inputs, as in this fiddle. When the user "scrolls" inside of one (e.g. by moving the cursor to the far right or left), I'd like to "scroll" the other so that it stays in sync. Can this be done, at least in modern browsers?
I would change the text that isn't being input to an IFrame. If both need to be inputs, then dynamically switch your element from iframe to input when it is focused on/away from.
In the input box, you can find where the caret is by using the selection properties; then the IFrame can then be scrolled using scrollTo.
I'm afraid I don't have a complete solution for finding out exactly the scroll state of the input box.
Let's say I have a set of contenteditable="true" divs.
<div id="0" contenteditable="true"></div>
<div id="1" contenteditable..></div>
<div...etc></div>
I can't have one div, multiple divs is a must. How could I highlight the content of more than one div? Using ranges? Anything else?
The answer is that it depends on the browser. See this example for a test of two methods using Ranges. The first attempts to create a Range per editable <div> and add all of them to the selection. The second attempts to create a single Range encompassing the contents of two editable <div>s.
Results:
In all browsers, it is impossible for the user to create a selection that lives in more than one editable element;
Firefox is the most permissive of the major browsers. Both programmatic methods work.
Safari and Chrome is the least permissive: neither method selects content from more than one editable element.
Opera 11 does not support multiple Ranges in the selection, but does support a selected Range spanning more than one editable element.
IE pre-version 9 does not support DOM Range or the same Selection API as other browsers, but the equivalent TextRange code does not allow selection from more than one editable element.
It is possible to switch the divs to contenteditable="false" on the fly as a consequence of starting a selection in one of them. Something like this gives you the idea (using JQuery):
$('div').bind("selectstart", function() {
$('div').attr("contenteditable", false);
});
Here's a fiddle to demonstrate (only tested in Chrome).
Note in the fiddle example that the first ContentEditable Div gets the focus. This allows you to type away as normal, but as soon as you select anything, using mouse or keyboard, you'll see you can extend the selection across divs as usual.
This obviously needs fleshing out to work with multiple browsers and to turn back to contenteditable="true" appropriately. But I think the approach is valid.