4

I want to create a bookmarklet that I can drop on my browser's bookmark toolbar which, when clicked, inserts a fixed, predefined text (in my use case, a shruggie: ¯\_(ツ)_/¯ ) at the current cursor position (assuming that the cursor is in an editable input field or textarea). However, I am a beginner at JavaScript, and can't figure out how to get started doing this. Any help? If I can get a pointer in the right direction, I can probably figure it out from there. Thanks!

jcgoble3
  • 515
  • 1
  • 4
  • 18
  • 2
    [Get the active input element](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement). [Get the cursor position in the content of that element](http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field). [Access and modify the contents of the input box](http://www.w3schools.com/jsref/prop_text_value.asp). [Manipulate the string to insert the text where you want](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). – afuous Nov 14 '16 at 09:09
  • @afuous That gave me everything I was looking for. After experimenting in the Firefox console, I got a working bookmarklet in about ten minutes (including distractions). See my answer below for what I came up with. – jcgoble3 Dec 04 '16 at 03:58
  • Nice, I might actually use this myself. – afuous Dec 05 '16 at 04:36

2 Answers2

4

Apologies for the delay; life threw a few curveballs at me right about the time I posted the question, and I forgot about this until StackOverflow notified me of the responses tonight.

The comment by afuous gave me everything I was looking for, and I now have a working bookmarklet. For anyone else who comes across this, here it is:

javascript:(function(a){a.value=a.value.slice(0,a.selectionStart)+"%C2%AF\\_(%E3%83%84)_/%C2%AF"+a.value.slice(a.selectionEnd);})(document.activeElement);

Or, as JavaScript that hasn't been converted to bookmarklet form:

(function (a) {
  a.value =
    a.value.slice(0, a.selectionStart) +
    "¯\\_(ツ)_/¯" +
    a.value.slice(a.selectionEnd);
})(document.activeElement);

This has the benefit of allowing for me to select a portion of a text and use the bookmarklet to replace the selection with a shruggie, as if I had hit a hypothetical shruggie key on the keyboard.

Feel free to steal and modify as you see fit. This has been tested only in Firefox 50.0.2, but I think it should work in all modern browsers. (It won't work in Internet Explorer 8 or earlier.)

Alan H.
  • 16,219
  • 17
  • 80
  • 113
jcgoble3
  • 515
  • 1
  • 4
  • 18
1

CSS Tricks has an article that explains how to do that and more. I'm well aware link only answers are less than ideal here, however the question is asking for pointers in the right direction, so I believe its a good fit.

The bookmarklet from the tutorial prefills forms, so essentially you are going to want to gut it, but first peek into how it is finding form controls and prefilling them. Then tweak to fit your desired functionality, and finally rip everything else out that you do not need or use.

Prefilling Forms Custom Bookmarklet

albert
  • 8,112
  • 3
  • 47
  • 63
  • 1
    Looks like a lot of great information there, but it's a bit over my head. The answer I posted below, building off of the comment on the question above, is all I needed. Thanks anyway, though. – jcgoble3 Dec 04 '16 at 04:00