Disable Shift-Enter in contenteditable - javascript

I'm creating a barebones in-browser code editor with a pre marked as contenteditable. I'm listening to the input event to perform code highlighting and some other side effects.
When a user hits Shift+Enter two line breaks are inserted which confuses my program and messes up cursor positioning. Is there a way to disable this?

In my opinion one would need to be able to detect that the SHIFT and ENTER keys were pressed. However, the INPUT event does not appear to contain that data. If you can use an event listener that contains data about all keys being used for a single event, then you may be able to use something like event.preventDefault() in the callback. I do not know what the context of all your code is, so I do not know if it is feasible to use other events, specifically keypress.
I also cannot reproduce the issue you are describing. You may be using a plugin that causes the double-spacing issue.

Related

<textarea>: ctrl + z breaks after changing the value content through javascript

I am making an HTML textarea that accepts tab key input using JavaScript.
When I searched for a solution on the web, I found this answer, but after some fiddling, I found out that ctrl+z stops working after I hit tab key.
Doing some more experiments revealed that changing the value attribute was likely the culprit of this problem. Here is a small scale code example that you can hopefully reproduce this behavior yourself.
https://codepen.io/MartianLord/pen/gORKPGp?editors=1010
I managed to find a workaround using document.execCommand to simulate the user input, but this method is deprecated as you can see here, so I am looking for a more up to date solution.
To support ctrl+z while using tab in <textarea>, you need to implement undo, redo functions to connect with <textarea>. When the <textarea> changes, record the changes in the history, and revert when ctrl+z key input occurs.
UndoRedojs is a library for this task.
I think there will be a lot of work to be done, such as setting the selection position, in order to fully implement it. I recommend using a text editor that has already been created.

Should I use change or input event to save data?

I'm still learning the best way to do things through jQuery and Javascript. I've got several input text boxes that I want to instantaneously update a record with when a change is made.
Handling a similar event from a Winforms perspective in the past, I would have handled this in the handler for a text change or got / lost focus event. I understand that "input" and "change" are the rough equivalents of these for input elements.
I want to ensure that 100% of the time that a change is made when the text is changed. My concern with using the "input" event is the possible overhead involved, while my concern with the "change" event is something out of the event's scope to handle (such as a browser closing, session expiration, etc.) would occur and prevent the update.
I'd prefer to use "input", but the thought of having a database hit every time someone types or deletes a character worries me. "Change" would be ok if I had a way to prevent the scenario I mentioned above.
The bottom-line is this: "Input" if overhead isn't a concern; "Change" if there is a way (which I'm not currently aware of) to ensure everything gets saved, possibly by handling another event as well.
What should I do? Thanks!

Catching all changes to the contents of an input box using JavaScript/jQuery

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:
$('#input').bind('keyup cut paste', function(){...});
This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:
When the user selects a of text and drags it do a different position in the input box
When the user uses the Delete action in the right-click context menu
Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.
English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?
In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.
Demo (works in all browsers)
It's possible this SO question (and related jsfiddle) might answer your question.
(On the linked jsfiddle, put text in the top box to test)
In other words, bind to mouseup and mousedown, etc.
If you can't find a combination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

Is there a profitable way to record user actions in textarea?

I need to send bunch of commands to the server on timer - like:
put(0,"hello")
del(4,1)
put(4," is around the corner")
so I need to monitor and record all of the user input and compile/flush it on the timeout (idle), something like macros.
I can record all things happening onKeyUp/onKeyDown/onMouseDown/onMouseUp using textarea cursor position and keys information (and make it cross-browser some time later) but I can't handle things like pasting using mouse right button and selecting 'Paste' or pasting from the menu (I can handle onChange, but I will have no information is it pasted or already recorded as pressed keys and it fires only after focus change). Even pasting from context menu fires some useful info, but the menu from the browser is the only thing, giving nothing for Javascript.
Is there any plugin for jQuery or something like that and do I really have no other ways to implement it without comparing current-document and document-a-second-before?
Upd.: There are events for handling cut/copy/paste: http://www.quirksmode.org/dom/events/cutcopypaste.html , but what about
the undo one?
P.S. I will show a macro-recording code when I'll finish, if someone really needs it. And to finish it properly, I just need the undo handling possibility. Current version is here: http://code.google.com/p/sametimed/source/browse/WebContent/module-editor.js, look for compileCommands method.
There are events for cut/copy/paste you may listen to, depending on browser. So if they are triggered you may use them, otherwise fall back to more tedious work-around.
See: http://www.quirksmode.org/dom/events/cutcopypaste.html

Capturing HTML Text Input Key press after key has been applied?

A total newbie question, so please bear with me here ;)
When a key press occurs in a HTML text input control, there are two events that seem useful in managing it (onKeyPress and onChanged). onKeyPress fires after the key has been pressed, but before the operation has been applied to the control's text. The later is only fired when focus is removed from the control and edits were made.
My question: Is there a way to capture the event, after the key press has been applied to the control but w/o removing focus (so I can work off of the resultant text)? Or is this pretty much the options I have to work off of?
Thanks!
You may also want to look at onkeyup and onkeydown events. I suspect you're interested in onkeyup. Perhaps you could provide more info and I could give a more complete example.

Categories

Resources