I'm trying to write JavaScript that manages the text a user selects in a webpage, but I'm not sure where to begin; i.e., I was wondering if there was a way to limit the ability to select/highlight text so that the selection ends at a terminating punctuation mark, and the user cannot select anymore (And possibly trigger an alert window or send an event when that limit is first reached). Also, is there a way to change the colour of highlighted/selected text in a browser? I'm familiar with JavaScript pointer and click events, but I'm having trouble finding any information on what I'm looking for.
Thanks in advance.
You want to look at window.getSelection().getRangeAt(0);
I found this answer pretty useful when I was looking at that:
https://stackoverflow.com/a/12823606
The context there is specifically highlighting, but obviously once you have the text you can do other things with it.
Related
Would you please tell me where to find information on how a user could initiate these input types while typing in a textarea element? This W3C Editor's Draft lists the input types, many of which are common, but several are not common to me. For example, I didn't know that CTRL + Backspace deleted the entire previous word; and that is not given in the draft.
How can a user perform "deleteSoftLineBackward" in a textarea, for example, and that short list of different types of soft and hard deletions of lines of text?
Is it always by key strokes of some type, or are there other ways?
The reason I ask is I'm building an undo/redo chain for a textarea that will replace that in the browser because user-triggered button events alter the value of the textarea and break the browser's undo chain. Mosts of it works well for my limited needs, but some of these events I simply don't know how to perform as a user composing in a textarea.
Thank you.
You can find some really interesting information in the GitHub related to the documentation you linked.
In the "Issues" section, you've one in particular which aims to "Create an overview of which inputtypes are used on which platform".
Then you've the support document in a Google Spreadsheet which should answer your question and provide you with enough information.
NB: to test these, I recommend you a tool like an inputEvent viewer...
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.
I have an input box: input type="text" class="rulerInputText" id="rulerInputBox" readonly
I have Javascript code to detect the selected text and play around with it.
The issue comes when I am allowing the user to actually select text. The text is basic with spaces. When the user begins selecting, there is no issue, but when a space is reached, the user selects it and the next word is automatically selected. Essentially, I want to prevent automatic selection of the entire word. I only want to select exactly what the user wishes to select with the mouse.
Is this possible or do I need to use some sort of crazy Javascript hacks to get this done?
This is a feature of Operating System. The OS provided textbox does auto-selection for better user experience. You do not have any control over here.
(I just confirmed on IE/Windows7)
This is a feature of IE specifically; no other browser has this behaviour. It's a deliberate “smart selection”(*) feature copied from Office, though in newer versions of Office it works less annoyingly, allowing you to revert to character selection if you move the pointer back.
There is as far as I know no way to turn it off in IE, either at the client or server end, because Microsoft think it's such a great feature. Sigh. Even JavaScript hacks don't provide a way round.
About all you could do would be to put invisible spaces between each character, so that IE thought each character was a second word. eg. try selecting:
foo bar bof zot
these have Unicode U+200B ZERO WIDTH SPACE characters between letters. This has side effects though; if the user tries to edit or copy-and-paste the text, they'll get weird invisible characters in the way potentially messing it up.
(*: As usual, “smart” means second-guessing the user, usually getting it wrong, and insisting it's right. aka. “stupid”. Run a mile from anything describing itself as smart.)
I'm trying to write a text editor.
I'd need to:
be able to understand what text is selected so that a shortcut could work in the correct portion of text, just like in this editor, if I select a word in the middle of the text and then press Ctrl+B
Be able to catch when some keys are pressed like this Ctrl+B and TAB
Any hint?
Take a look at Reverse Engineering the WMD Editor. That's the editor used on SO and supports what you're referring to. The function that augments the current text selection as Bold is called doBorI(). Search for it in the source.
As for catching keyboard events, this page has a great primer on that, including detecting which key has been pressed.
Not sure what your specific question is exactly, but hopefully those are good starts.
I would suggest having a look at one of the existing editors to see how they handle this.
I recently started using: JWysiwyg, which has the advantage of being a very concise code-base and hence easier to decipher.