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.
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...
Is there any easy way or plugin to allow users to select (with their mouse) multiple parts of a text on my page?
I know that using window.getSelection().toString() I can get the current selection, but I'd like to allow the user to highlight multiple parts of the text and be able to know what pieces they highlighted.
Something like the picture below:
The general idea is to allow the users to create keywords/key expressions directly from the text
Found one that does exactly what I want (+it's compatible with really old browsers)
https://github.com/mir3z/texthighlighter
I run a large Discord server and I'm making a channel for people to post template information about their online groups. To make complying with the template either, I've created a single HTML page which takes the information that goes in the template and regurgitates it into a box on the bottom of the page with some nice bolding and italics where needed already for copy/paste.
Unfortunately, I don't know Javascript so I'm just trying to piece things together and learning as I go. (I'm learning other languages but not this one in school.)
For some reason me trying to format code on here isn't working so I can't paste what I have so I'll just try and explain it.
I'm using oninput="groupNameFunction()" and I'm having the javascript grab the user entered data as they type it via grabbing the ID of the input field then regurgitating it out in the innerHTML of another element. And it works great.
But checkboxes (and probably radio buttons) don't work with oninput (for pretty obvious reasons) but I've been able to get onblur to work to some extent.
The problem is that I'm a beginning coder and I don't quite know or understand how I'll take all the results from all the checkboxes and regurgitate them out into a nice list when there are many IDs and many choices and it doesn't seem sensible to try and write all choices from a single thing into their own function, or how I'll handle the same thing with radio buttons.
I can't find any examples in stuff like W3 tutorials of this being done, it's probably that I just don't know the language to google it correctly.
Could someone point me in the right direction on how to make this work?
here's a little fiddle for you to play with. (press F12 to open developer tools and see console, you'll find logs there)
for radio and checkbox inputs you have change event, it triggers when user check and uncheck the box. bare in mind that you need to have same name="friendly-name" attribute on radio buttons in order them to work as expected.
for the "text" filed use input event.
don't add inline events in HTML, it's bad practice, add them via JS. from JS you can select all your inputs by ther class, name, tag name etc.. and add event handlers (you can find everything in the fiddle).
hope it helps. :D
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'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.