Question

我正在制作一个处理化学公式的小型JavaScript网络应用程序，因此我需要允许用户输入上标。用户最简单的方法就是让文本编辑器在按下^时切换到上标。我怎么能用HTML textarea做到这一点？

Answer 1

我建议利用现有的解决方案。看看MathQuill。

关于从头开始创建自己的这样的系统，没有简单的解决方案。您需要进行独立的研究和实验，并返回Stack Overflow并提出更具体的问题。

Answer 2

借用adeneo's answer

中的功能

在此处查看此小提琴：fiddle

用法：要输入上标，请按^ - ＆gt;输入上标 - ＆gt;按Esc键，上标将出现在textarea中。

＆＃13;

$(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 = '+−=()0123456789AaÆᴂɐɑɒ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;
    });
  });
}

＆＃13;

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

＆＃13;

HTML输入中的上标和下标

2 个答案: