Javascript 希望在HTML/JS中用输入字段表示分数模板

我有一个输入字段（键入文本）和一个生成通用分数模板的按钮。现在它看起来与此类似（X/Y）。我一直试图通过使用.sup（）和.sub（）方法使其看起来更好，但不幸的是，我没有成功地使最终表单看起来如下所示：

（X/Y）

---

有什么建议可以让这更美观吗？

也许简单点，比如

(<span class="numer">X</span>/<span class="denom">Y</span>)

您可能需要对参数进行一些调整

另外，我没有测试这些值，可能还需要一些调整

更新1：

请参见

更新2：

假设这里有jQuery

function frac_display(ob, x, y) {
  $(ob).html([
    "(<span class='numer'>",
    x,
    "</span>",
    "/",
    "<span class='denom'>",
    y,
    "</span>)"
  ].join("");
}

功能分形显示（ob，x，y）{
$（ob）.html([
"(",
x,，
"",
"/",
"",
Y
")"
].加入（“”）；
}

---

此函数将采用唯一的元素标识符（类或id标识符为

.fraction1

或

#frac_234

），一个x和y值，并将代码放置在元素中。

您在问题中说您希望在

字段中设置文本格式。这是不可能的，确切地说：

的内容是纯文本，只能有一个统一的样式。以下是一些备选方案：

• 简单：使用两个
  s：

  <p>(<sup><input></sup>/<sub><input></sub>)</p>
  

• 古怪：使用上标/下标字符：

  <p>(<input value="ⁿ/ₓ">)</p>
  

  （）
  
  

  这种方法的问题是，像这样的字母很少，尽管有数字；例如，ª²/₃₄.

• 可能不起作用：在除法模板中使用分数斜杠字符U+2044“/”

  <input value="1&#x2044;2">
  

  根据模板中的操作系统、浏览器、字体和字符，使用此字符可能会导致左右两侧的数字以对角或垂直方式排列为分数。以下是一些示例，以了解其是否适用于您：1⁄2 1⁄3 3⁄4

---

给我们举个例子。制作一个jsFiddle这些方法已经被弃用。@philtune为什么jsFiddle不是一个这么简单的代码段？@Madbreaks或者/或者…可能是一个代码笔，whichever@philtune要点：为什么要推荐一个外部网站？我真的很好奇。我希望这个模板在我每次点击一个按钮时都出现，所以基本上我可以有多个按钮。C我把它连接到一个js函数，这样它每次都会生成一个新的模板？我不明白为什么不…让我看看我能把什么放在一起。我以为你想要分数显示在

中，不是吗？我的理解是，输入提供了生成模板的数据（结果显示）上面。谢谢，我没有意识到我无法改变文本的外观。这也包括颜色吗？@kevin ReidAlso更改某些文本元素的字体大小怎么样？是的，你根本不能单独设置文本的任何部分的样式。它将全部显示在

元素的样式集中。

<p>(<input value="ⁿ/ₓ">)</p>

<input value="1&#x2044;2">