Currently, I am in the process of developing a JavaScript web application that involves working with chemical formulas. One key feature I need to implement is allowing users to input superscripts easily. Ideally, I would like the text editor to automatically switch to superscript when users press '^'. Can anyone provide guidance on how to achieve this functionality within an HTML textarea?
Referencing the solution provided in adeneo's response
To view the demonstration, click on this fiddle link: fiddle
Instructions: Use ^ to initiate a superscript, enter the content for superscript, then press Esc key. The formatted superscript will be displayed in the textarea.
$(document).ready(function() {
var temp = {}; // maintain keystrokes here
var current_value = "";
$("#text_area").keydown(function(e) {
temp[e.which] = true;
});
$('#text_area').keyup(function(e) {
if (e.keyCode == 27 && current_value != "") {
var length_1 = current_value.length;
var length_without_sup = length_1 - 5;
var substr_superstring = $('#text_area').val().substr(length_without_sup);
var current_text_2 = current_value + substr_superstring;
current_text_2 = current_text_2 + "</sup>";
$('#text_area').val(current_text_2);
$('#text_area').superScript();
}
var flag_shift = false;
var flag_super = false;
for (var key in temp) {
if (key == 16) {
flag_shift = true;
} else if (key == 54) {
flag_super = true;
}
}
if (flag_shift == true && flag_super == true) {
var current_text = $('#text_area').val();
current_text_2 = current_text.substr(0, current_text.length - 1);
current_text_2 = current_text_2 + "<sup>";
$('#text_area').val(current_text_2);
current_value = hide_superscript_tag();
}
delete temp[e.which];
});
});
function hide_superscript_tag() {
var current_value = $('#text_area').val();
current_value_2 = current_value.substr(0, current_value.length - 5);
$('#text_area').val(current_value_2);
return current_value;
}
$.fn.superScript = function() {
var chars = '+−=()0123456789AaÆᴂɐɑɒBbcɕDdðEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸqrRɹɻʁsʂʃTtƫUu...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text_area">
</textarea>If you're looking to implement a math input solution, consider exploring an established tool like MathJax.
Building your own system from the ground up can be complex and challenging. It's recommended to conduct thorough research and testing before seeking assistance on platforms like Stack Overflow.
I have a functionality in place that processes data received from a server through websocket. Depending on the specific page being accessed, the data is handled differently. sock.onmessage = function (e) { log(e.data); } function returnCurrentPage(m) ...
Whenever I use typescript with create-next-app, my tsx files are filled with numerous "Problems" messages. These errors only appear in Visual Studio Code and do not affect the build process. I have tried uninstalling vscode, removing all extensions, and ...
As a newcomer to Vuetify and Vue in general, I am struggling to solve a specific issue. I need to create multiple sub-groups where only one option can be selected within each "parent" list. Consider an array of cats: options:["Crookshanks", "Garfield", " ...
I've been struggling to retrieve the email entered in a form and print it in the console. Despite my code compiling without errors, the email is not being fetched. My goal is to utilize nodemailer for sending registration emails, but I'm encounte ...
After writing a custom jQuery extension script to remove a specified element from an array, I realized it was not functioning as expected. I am now trying to determine how to manipulate references without using the return reference method. $.fn.removeElem ...
I'm relatively new to CRM, so please bear with me as I may make some mistakes along the way. Currently, I am attempting to dynamically generate a web resource (specifically in JavaScript or JScript) early bound using OrganizationServiceproxy in the f ...
I am currently facing an issue with submitting form data to a PHP file when it is generated using JavaScript. I am unsure of how to resolve this problem. The form submission works fine on a test .html file by itself, but not when it is generated by JavaScr ...
Is it possible to integrate my Angular 4 component (a mail window widget application built with webpack) into a static website, ideally utilizing the <script> tag? I came across some blog articles, but they all mention using SystemJS while my app is ...
I have created a unit test for this code snippet and used Sinon to stub the browser methods (specifically with sinon-chrome, an older but still functional library that suits my needs). /** * Returns an array of languages based on getAcceptLanguages and ge ...
Can someone assist me? Here's what I have done: <div class="tabs"> <ul> <li><a id="tb-1" position=1 href="tabs-1"> A </a></li> <li><a id="tb-2" position=2 href="tabs-2"> B </a></li> ...
I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...
I've been busy developing a small web application using ReactJS and Material UI. In the documentation examples, many components include useStyles within the code. I've decided to follow suit and now have a useStyles function in each of my compone ...
I encountered an error when attempting to assign a value to my property countryCallingCode, which does not exist in the first option. this.allData.customerFacingPhone.countryCallingCode = newItem.countryCallingCode The error message I received was: ERROR ...
As I work on developing a custom input component for my project, I am encountering an issue unlike the smooth creation of the custom button component: Button Component (smooth operation) export type ButtonProps = { color: 'default' | 'pr ...
Is it possible to set up full calendar so that it automatically advances to the next month if there are no events scheduled? For example, if there are no events in June or all events have already taken place, can the calendar automatically move on to July ...
I need a way to clear all models from the Canvas with just one click and then switch over to a new Canvas. I want to make sure that all items are removed from memory before making the change. Is there a way to accomplish this? return ( <div clas ...
I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...
I have been attempting to trigger a function every few seconds with the following code snippet: HTML: <div id="Result">Click here for the message.</div> JS: $(document).ready(function () { $("#Result").click(function () { var ...
Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...
Currently, I am trying to integrate components from the @material-ui package into my app by using the ThemeProvider at the root. However, I am encountering some difficulties. Interestingly, other components that utilize locally defined styles (without the ...