Верхние и нижние индексы в HTML-вводе

Question

Я создаю небольшое веб-приложение для JavaScript, которое занимается химическими формулами, поэтому мне нужно разрешить пользователям вводить верхние индексы. Самый простой способ для пользователей - переключить текстовый редактор на верхний индекс, когда они нажимают ^. Как я могу это сделать с текстовой областью HTML?

Answer 1

Я бы рекомендовал использовать существующее решение. Взгляните на MathQuill.

Что касается создания собственной системы с нуля, нет простого решения. Вам нужно будет провести независимые исследования и эксперименты и вернуться к Stack Overflow с более конкретными вопросами.

Answer 2

заимствование из функции в adeneo's answer

---

Проверить эту скрипку здесь: fiddle

---

Использование: Для того, чтобы ввести верхний индекс, нажмите^-> введите верхний индекс -> нажмите Esc, надпись появится в текстовом поле.

---

$(document).ready(function() { 
 
    var temp = {}; // store keypresses 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 = '+−=()AaÆᴂɐɑɒBbcɕDdðEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸqrRɹɻʁsʂʃTtƫUuᴜᴝʉɥɯɰʊvVʋʌwWxyzʐʑʒꝯᴥβγδθφχнნʕⵡ', 
 
    sup = '⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹ᴬᵃᴭᵆᵄᵅᶛᴮᵇᶜᶝᴰᵈᶞᴱᵉᴲᵊᵋᶟᵌᶠᴳᵍᶢˠʰᴴʱᴵⁱᶦᶤᶧᶥʲᴶᶨᶡᴷᵏˡᴸᶫᶪᶩᴹᵐᶬᴺⁿᶰᶮᶯᵑᴼᵒᵓᵔᵕᶱᴽᴾᵖᶲqʳᴿʴʵʶˢᶳᶴᵀᵗᶵᵁᵘᶸᵙᶶᶣᵚᶭᶷᵛⱽᶹᶺʷᵂˣʸᶻᶼᶽᶾꝰᵜᵝᵞᵟᶿᵠᵡᵸჼˤⵯ'; 
 

 
    return this.each(function() { 
 
    this.value = this.value.replace(/<sup[^>]*>(.*?)<\/sup>/g, function(x) { 
 
     var str = '', 
 
     txt = $.trim($(x).unwrap().text()); 
 

 
     for (var i = 0; i < txt.length; i++) { 
 
     var n = chars.indexOf(txt[i]); 
 
     str += (n != -1 ? sup[n] : txt[i]); 
 
     } 
 
     return str; 
 
    }); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="text_area"> 
 
</textarea>