superorsub

A package to Type Super or Subscript in HTML inputs with minimal setup.

Usage no npm install needed!

<script type="module">
  import superorsub from 'https://cdn.skypack.dev/superorsub';
</script>

README

Super- or Sub Script

License: MIT

A package to Type Super or Subscript in HTML inputs with minimal setup.

View on Images and Gifs and ReadMe/Docs on GitHub

headerIMG

Example:

headerIMG

This is a package that solves and Issue I had some time ago. How to write Chemical Formulas on A website without knowing difficult Key Combos.

This solves a very specific problem and the only reason to make it a package is for someone who might need to do something similar and will be able to fork from or find inspiration form this. When I needed it, I could not find something similar.

How it works

It adds an event listener when initialized for focusin.

It also adds a event listener for keydown.

When a user focuses on an input and presses the key Como the packages will "inject" the Unicode char for the Subscript or Superscript.

Under the hood it uses KeyboardEvent.code as appose to the unrecommend and deprecated KeyboardEvent.keyCode.

Currently the only supported Key combonatiation are ctrlKey + shiftKey + 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, -, +, [, ]

How to Install

npm i superorsub

or

yarn add superorsub

How To use it.

import { SuperorSub } from 'superorsub';

const superorsub = new SuperorSub({
  isSuper: true,
});

// Toggle isSuper (Function to change isSuperValue)

superorsub.toggleSuperorSub();

// Current isSuper  Value (Read only Boolean)

superorsub.isSuper();

Initiate Class

Setting isSuper to true will make it Type in Super Script, setting it to false will make it Subscript.

Props/Methods

Type Info
toggleSuperorSub(boolean) method Passing a boolean in this method will change the isSuper to whatever value is passed.

So you can initiate the Class and set is Super and leave it if only Super or Sub script is necessary. With toggleSuperorSub you can make the user toggle between that.

TODO / ISSUES

  • Let user select Key Combos To Trigger
  • Add more options than just Numeric Chars (Full list of Alphanumeric)