[Userscript] Submit posts & comments with Ctrl + Enter

Clarifications

  1. This works most of the time. Sometimes it doesn’t. Needs a bit more testing.
  2. the new version of Lemmy (link to PR) will have a few shortcuts, and this userscript will be deprecated. But until then, I will keep using it.

Original post:

cross-posted from: sh.itjust.works/post/42893

Decided to make a little script that listens to textareas in post & comments, and if you press Ctrl Enter while focusing on them, it submits them. I use this to post comments faster and with less bother. It’s reminiscent of the RES feature to do the same thing.

If you use Greasemonkey or Tampermonkey, you can install this easily and instantly have CtrlEnter to submit. Let me know any improvements I can make.


<span style="font-style:italic;color:#969896;">// ==UserScript==
</span><span style="font-style:italic;color:#969896;">// @name         Lemmy Form Submit with Ctrl+Enter
</span><span style="font-style:italic;color:#969896;">// @version      1.0
</span><span style="font-style:italic;color:#969896;">// @description  Submit forms with Ctrl+Enter in Lemmy instances so you don't have to click the button every time you want to post something.
</span><span style="font-style:italic;color:#969896;">// @author       God (https://sh.itjust.works/u/god)
</span><span style="font-style:italic;color:#969896;">// @match        https://*/post/*
</span><span style="font-style:italic;color:#969896;">// @match        https://*/comment/*
</span><span style="font-style:italic;color:#969896;">// @icon         https://join-lemmy.org/static/assets/icons/favicon.svg
</span><span style="font-style:italic;color:#969896;">// ==/UserScript==
</span><span style="color:#323232;">
</span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">isLemmy </span><span style="font-weight:bold;color:#a71d5d;">=
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.head.querySelector(</span><span style="color:#183691;">"[name~=Description][content]"</span><span style="color:#323232;">).content </span><span style="font-weight:bold;color:#a71d5d;">===
</span><span style="color:#323232;">  </span><span style="color:#183691;">"Lemmy"</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(isLemmy) {
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// Define a global variable to keep track of the currently focused textarea.
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">currentFocusedTextarea </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">null</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// Function to attach focus and blur event handlers to all textareas.
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="font-weight:bold;color:#795da3;">attachEventHandlers</span><span style="color:#323232;">() {
</span><span style="color:#323232;">    </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.querySelectorAll(</span><span style="color:#183691;">"textarea"</span><span style="color:#323232;">).forEach((textarea) </span><span style="font-weight:bold;color:#a71d5d;">=&</span><span style="color:#323232;">gt; {
</span><span style="color:#323232;">      </span><span style="font-weight:bold;color:#795da3;">if </span><span style="color:#323232;">(!textarea.dataset.ctrlEnterHandled) {
</span><span style="color:#323232;">        textarea.dataset.ctrlEnterHandled </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">true</span><span style="color:#323232;">;
</span><span style="color:#323232;">
</span><span style="color:#323232;">        </span><span style="font-style:italic;color:#969896;">// Check if this textarea is currently focused
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">wasFocused </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.activeElement </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#323232;">textarea;
</span><span style="color:#323232;">
</span><span style="color:#323232;">        textarea.addEventListener(</span><span style="color:#183691;">"focus"</span><span style="color:#323232;">, </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">() {
</span><span style="color:#323232;">          currentFocusedTextarea </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#ed6a43;">this</span><span style="color:#323232;">;
</span><span style="color:#323232;">        });
</span><span style="color:#323232;">
</span><span style="color:#323232;">        textarea.addEventListener(</span><span style="color:#183691;">"blur"</span><span style="color:#323232;">, </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">() {
</span><span style="color:#323232;">          currentFocusedTextarea </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">null</span><span style="color:#323232;">;
</span><span style="color:#323232;">        });
</span><span style="color:#323232;">
</span><span style="color:#323232;">        </span><span style="font-style:italic;color:#969896;">// If this textarea was focused, blur and re-focus it to ensure event handlers get triggered
</span><span style="color:#323232;">        </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(wasFocused) {
</span><span style="color:#323232;">          textarea.</span><span style="color:#0086b3;">blur</span><span style="color:#323232;">();
</span><span style="color:#323232;">          textarea.</span><span style="color:#0086b3;">focus</span><span style="color:#323232;">();
</span><span style="color:#323232;">        }
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">    });
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// Attach a keydown event handler to the entire document.
</span><span style="color:#323232;">  </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.addEventListener(</span><span style="color:#183691;">"keydown"</span><span style="color:#323232;">, </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">(event) {
</span><span style="color:#323232;">    </span><span style="font-style:italic;color:#969896;">// If Ctrl + Enter is pressed
</span><span style="color:#323232;">    </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(event.ctrlKey </span><span style="font-weight:bold;color:#a71d5d;">&</span><span style="color:#323232;">amp;</span><span style="font-weight:bold;color:#a71d5d;">&</span><span style="color:#323232;">amp; event.key </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#183691;">"Enter"</span><span style="color:#323232;">) {
</span><span style="color:#323232;">      </span><span style="font-style:italic;color:#969896;">// If a textarea is focused and contains text
</span><span style="color:#323232;">      </span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(
</span><span style="color:#323232;">        currentFocusedTextarea </span><span style="font-weight:bold;color:#a71d5d;">&</span><span style="color:#323232;">amp;</span><span style="font-weight:bold;color:#a71d5d;">&</span><span style="color:#323232;">amp;
</span><span style="color:#323232;">        currentFocusedTextarea.value.trim() </span><span style="font-weight:bold;color:#a71d5d;">!== </span><span style="color:#183691;">""
</span><span style="color:#323232;">      ) {
</span><span style="color:#323232;">        </span><span style="font-style:italic;color:#969896;">// Your submit logic here
</span><span style="color:#323232;">        handleSubmit(currentFocusedTextarea);
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">    }
</span><span style="color:#323232;">  });
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="font-weight:bold;color:#795da3;">handleSubmit</span><span style="color:#323232;">(textarea) {
</span><span style="color:#323232;">    </span><span style="font-style:italic;color:#969896;">// find the closest type="submit" button and press it.
</span><span style="color:#323232;">    textarea.closest(</span><span style="color:#183691;">"form"</span><span style="color:#323232;">).querySelector(</span><span style="color:#183691;">'[type="submit"]'</span><span style="color:#323232;">).</span><span style="color:#0086b3;">click</span><span style="color:#323232;">();
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// Call the function initially to cover textareas that exist when the page is first loaded.
</span><span style="color:#323232;">  attachEventHandlers();
</span><span style="color:#323232;">
</span><span style="color:#323232;">  </span><span style="font-style:italic;color:#969896;">// Observe the document for changes and reattach event handlers when new textareas are added.
</span><span style="color:#323232;">  </span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">observer </span><span style="font-weight:bold;color:#a71d5d;">= new </span><span style="color:#323232;">MutationObserver(</span><span style="font-weight:bold;color:#a71d5d;">function </span><span style="color:#323232;">(mutations) {
</span><span style="color:#323232;">    mutations.forEach((mutation) </span><span style="font-weight:bold;color:#a71d5d;">=&</span><span style="color:#323232;">gt; {
</span><span style="color:#323232;">      </span><span style="font-weight:bold;color:#795da3;">if </span><span style="color:#323232;">(mutation.type </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#183691;">"childList"</span><span style="color:#323232;">) {
</span><span style="color:#323232;">        attachEventHandlers();
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">    });
</span><span style="color:#323232;">  });
</span><span style="color:#323232;">
</span><span style="color:#323232;">  observer.observe(</span><span style="color:#0086b3;">document</span><span style="color:#323232;">.body, { childList: </span><span style="color:#0086b3;">true</span><span style="color:#323232;">, subtree: </span><span style="color:#0086b3;">true </span><span style="color:#323232;">});
</span><span style="color:#323232;">}
</span>
  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • wartaberita
  • uselessserver093
  • Food
  • aaaaaaacccccccce
  • [email protected]
  • test
  • CafeMeta
  • testmag
  • MUD
  • RhythmGameZone
  • RSS
  • dabs
  • TheResearchGuardian
  • Ask_kbincafe
  • KbinCafe
  • Testmaggi
  • Socialism
  • feritale
  • oklahoma
  • SuperSentai
  • KamenRider
  • All magazines
    •