如何允许用户在输入中键入上标？

Question

像这样：https://giphy.com/gifs/l0Exj1s5ieHCTg4Fi

上标代码

sup {      
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
} 
sup {
  top: -0.5em;
}

Answer 1

最简单的方法（知道只用输入就无法做到）是制作迷你降价格式（比如添加评论时stackoverflow网站的输入）

以下是一个示例:(尝试在输入中键入此57**7** + 20**-1**，看看会发生什么）。

var input = document.getElementById('input');
var result = document.getElementById('result');
var desired = document.getElementById('desired');

input.oninput = function(){
  var v = this.value;
  var d = v.replace(/\*\*(.*?)\*\*/g, "^$1");
  v = v.replace(/\*\*(.*?)\*\*/g, "<sup>$1</sup>");
  result.innerHTML = v;
  desired.textContent = d;
}

Input goes here: <input id='input'/><br>Result is seen here: <span id='result'></span><br>Desired format is seen here: <span id='desired'></span>

将输入的值替换为**所有sup标记的文本，然后使用innerHTML在范围内显示结果。