HTML輸入中的上標和下標

Question

我正在製作一個處理化學公式的小型JavaScript Web應用程序，因此我需要允許用戶輸入上標。對用戶來說最簡單的事情就是讓文本編輯器在按^時切換到上標。我怎樣才能做到這一點與HTML textarea？

Answer 1

我會建議利用現有的解決方案。看看MathQuill。

關於從頭創建自己的這樣的系統，沒有簡單的解決方案。您需要進行獨立研究和實驗，並返回Stack Overflow以獲得更具體的問題。

Answer 2

在adeneo's answer

---

檢查這個小提琴這裏從功能借款：fiddle

---

用法：要鍵入標，按^ - >鍵入上標 - >按Esc，上標將出現在textarea中。

---

$(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>