"editable" nodes (whether they're form elements or elements with #contenteditable set) allow pasting, that is they both trigger a paste when C-v/⌘-v is pressed and enable a Paste item in a contextual menu on right-click (and I guess they trigger a paste on middle-click in many linux environments).
It's possible to intercept left clicks and focus an editable element nearby to allow/intercept keyboard-based pastes, but I'm also looking for middle-click and context menus to behave and enable pasting in specific context (elements which kinda sorta look and feel editable but technically are not).
An example of the issue can be seen playing with DocumentCloud's visualsearch: it looks like a big input with tags but is a sequence of items and small (10 px wide) inputs. Left-clicking in the white space at the end focuses the closest input, but right- or middle-clicking at the same place does not enable pastability, one has to click specifically on an input for this to work.
SO's tags editor somewhat works around the issue by having a single big input filling up the end of the area (but no way to insert new tags at other places), but the issue exists if one middle- or right-clicks between tags or on a tag.
Related
TLDR
Open this up in IE8 http://jsbin.com/ucahor/1/edit#/ucahor/2/edit
Click on a blank line and immediately press Backspace. 2 lines are deleted.
Click on a blank line, wait a second then press Backspace. 1 line is deleted.
Is there anything I can do to work around this?
Full story
I'm trying to make the best possible rich text editor for my web application. I've taken NicEdit and added a bunch of functionality. I'm using nicedit because it was the only editor that satisfied these requirements from the 9 I tested.
Works in IE6
Can paste from Word
Numbering and bullets
Pure Javascript (so we can modify it easily)
Small number of files downloaded
Can set the cursor position
Can be fullscreened
Can handle large files (1500 paragraphs pasted)
One thing I added to my implementation of NicEdit is to have headings inserted for common reports that my users write. A problem with this is that I need a way of having blank lines between the headers. I cannot use <br/> tags because they do not play nicely with inserting lists and I cannot use <div> tags because internet explorer has issues with divs inside a content editable div.
This leaves me with using the <p> tag for indicating new lines.
However I can't just use <p></p>, it is an HTML standard for user agents to ignore empty P tags.
Currently my users are getting by with <p> </p> but this indents every line with a space and new lines do not have the space.
I discovered that there is a Zero Width Space character that will allow my P tags to be rendered and not have a space on each line!
My new <p></p> works well except if a user is deleting a line the first backspace appears to do nothing.
So I bound to my keydown event for backspace. It checks the character before the cursor, if it is my Zero Width Space character I blank it out and let the backspace continue as normal.
This works, except if you click the line you wish to delete and quickly click backspace. That action causes 2 lines to be deleted.
You can load up your IE8 and try it out here. http://jsbin.com/ucahor/1/edit#/ucahor/2/edit
I am trying to make it possible to insert text at the current caret location in a text field when clicking something on the page.
In order to make this work the focus should not leave the text field when clicking, and the caret should not be moved.
I can get this working in - for instance - chrome with event.preventDefault() in the mousedown event.
But in internet explorer I simply cannot make this work. Any suggestions welcome.
Clarification: I am trying to provide some good means for the users to input exotic characters that can not be entered directly from their keyboard.
I have implemented for instance ctrl+alt+p which works well in all browsers, except internet explorer where I cannot stop the default behaviour of pressing ALT (activating the menu bar).
I have then made a "palette" of the characters next to the field, that can be clicked with the mouse while typing. This works well in all browsers, except internet explorer where I cannot prevent the default blur-behaviour of a mouseclick.
Maybe this is a dead conversation but I have a solution.
For IE specifically look into the onbeforedeactivate event. You will want to attach this to the the element you want to keep focus. It's a bit tricky because if you always cancel this event you can never loose focus on this element but if you're careful how you implement it you can achieve what you want.
I've been doing this for a while now with nice clean results.
Don't do this
I suggest you don't do this, because keeping (or better said returning focus) caret in text field will also prevent users from changing browser's address bar which is something you don't want..
I suggest you rather explain your process more detailed and maybe we can suggest a better alternative.
After some clarification
What you should do is insert text/character at caret position. input and textarea preserve caret position even when they loose focus. So you should do something similar to what stackoverflow does here. When you select some text (when you type question/answer) and then click B icon on top, two stars are added around selected text. This is how you should do your special character insertions. When user clicks a perticular exotic character, that character should be added/inserted at input's caret position.
There are quite a few stackoverflow questions related to solving this exact problem - adding text at caret position:
How to insert text at the current caret position in a textarea
How do I insert a character at the caret with javascript?
Setting (or Reading) value of Cursor/Caret in HTML TextArea
Inserting text at cursor in a textarea, with Javascript
Insert text on the current place of the cursor in the browser
...
I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.
I'm looking for a rich text editor that allows for locking regions so that they can't be edited by the user. These locked regions would contain markup, not just plain text. TinyMCE has a plugin to support this but it is quite buggy.
Rather than having the RTE contain the content you don't want edited, why not just put multiple editors around only the areas you want users to edit?
The problem I see with doing it the other way is that you could have individual nodes within the editable text with contenteditable off, but those nodes could still be part of a larger edit (e.g., they could be deleted). To truly prevent them being edited you'd have to check the current selection whenever it changed and disable all user actions until the selection didn't include the locked content. Even if you did that, it would be tricky to make sure that a user didn't add content in a place they weren't supposed to (before the first node, say, assuming the first node was locked).
How can I detect text selection from a text search using the browsers Ctrl+F.
For example, I want to make a FAQ, where are the items are closed (to remove clutter), and clicking them opens the text within them, but at the same time I don't want Ctrl+F to be broken.
So I'm thinking, is there a way for JavaScript to detect that I have searched for some text within a non visible (but selectable) block of text, and to automatically open it.
Is it even possible to detect text selection from a search with Ctrl+F? If so, how?
A more specific example: I have a div with the id of "one" and a div with the id of "two"
both have their own text:
<div id="one">Google is a search engine</div>
<div id="two">Stackoverflow users are very informative</div>
both have their text hidden from view but still selectable, but not by mouse (using margins or covering)
So a user searches for "Stackoverflow" on this page, I want to trigger a JavaScript function upon the search selection (how??), and I need the function that runs to know which div, with what ID has some text selected.
This is browser dependent. In Chrome (maybe Webkit in general?), it seems to use a selection that is separate from the one in the DOM API.
However, Firefox will use the DOM selection when highlighting text from a Ctrl+F.
For example, go to google.com, and type this in Firebug:
window.getSelection().toString()
This will return ""
Now do a Ctrl+F, type in Privacy, press enter.
Enter the above command again in Firebug, and you will get:
"Privacy"
As far as I know, there is no way. The content of the search field entirely under the control of the browser, and you can't access this from within the page.
What you might be able to do however, is detect a selection in the document and react to that. This will however probably produce many false positives (because you can't distinguish between an ordinary selection and a search), and it won't work with browsers that do not use an ordinary selection to highlight search results.
More info on detecting selections: Introduction to Range on Quirksmode
Why not make the FAQ search friendly and use a service for that. Google Custom Search Engine might be a good place to start.