Carriage move to read-only section content allowing dynamic selection
I have struggled to get the field to work correctly. A lot of data is displayed in this field and the user wants to select and copy most of it. The data is basically a large list and the user wants to select all records below a certain point. The way they arrive at a selection is to highlight one or two words in the first entry they want and then press Ctrl + Shift + End to select everything at the bottom. This worked before adding a new feature on the page below the list content. Now the hotkey also selects the content of the rest of the page.
The current implementation is simple:
<div id='diff-contents'>[content here]</div>
<div id='trailing-content'>blah blah blah...</div>
I tried read-only input field:
<input id='diff-contents' value='[content here]' readonly/>
This works in Firefox to some extent, however the content contains HTML and the input field shows html literally, not rendered. In addition to this, Chrome does not show flickering carets, and the hotkeys do nothing , so the input field is unfortunately not suitable for me in this situation.
How can I make a select box that maintains focus for the cursor and shows a blinking caret but is not editable using javascript, CSS, HTML, or JQuery?
source to share
@Aaron Digulla mentioned key listeners and it got me thinking about simply stopping events.
The diff-content element is still a div, but it's editable. This gives both HTML rendering and a flickering caret.
$(this).keydown(function (event) {
if (document.activeElement.id == 'diff-content') {
if (!allowedKeys(event.keyCode)) {
//The only other key presses that should be processed are ctrl+c (keycode 67) and ctrl+a (65)
if (!event.ctrlKey || !(event.keyCode == 67 || event.keyCode == 65)) {
event.preventDefault();
}
}
}
});
javascript adds a keydown event listener to the entire page. This is necessary because if you just add it to the element, the event has already propagated to the rest of the page and will still be handled, which is giving me funny problems. We then check if this diff content is active as we want the other input elements to still work fine. Then we check if the key event is an allowed key (tab, home, end, arrows). And finally, check ctrl + c and ctrl + a and allow them. I tried event.stopPropogation () and event.stopImmediatePropogation () and neither worked, but preventDefault.
Finally, I added style="outline-style:none"
to the element so that the blue border does not appear when the element has focus.
The only issue I haven't resolved yet is that since it's editable, the browser still lets you select and then right-click or cut or paste, which will allow you to change the text.
Here is the final jsfiddle for what I'm using: http://jsfiddle.net/wh3nzmj8/12/
source to share
Look at these questions for how to determine the current selection: Retrieving selected text in the browser, cross-platform
The next step is to create a new range that starts with an end tag #diff-contents
. With this information you will be able to expand / modify the existing selection.
I suggest either adding a button to the UI, or using JavaScript with a keypress handler to run this code.
In doing so, you must select the correct amount of HTML. Users can then copy this to the clipboard using Ctrl+C.
source to share