Question

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

（^X / <子>ý）

任何有助于使这更美观的提示？

Answer 1

您在问题中表示要格式化<input>字段中的文本。这是不可能的：<input>的内容是纯文本，只能有一个统一的样式。以下是一些替代方案：

简单：使用两个<input> s：
```
<p>(<sup><input></sup>/<sub><input></sub>)</p>
```
这将始终要求用户在两个字段之间进行选项卡而不是键入斜杠，除非您添加代码进行调整（这非常容易出错）。
高级：使用contenteditable允许用户编辑包含<sup>和<sub>元素的区域。这需要额外的代码来提取结果并处理用户，例如删除下标文本，因为你基本上允许用户在这个区域编辑HTML（他们可以做一些古怪的事情，比如从其他地方粘贴样式文本/ HTML）。
```
<p>(<span contenteditable><sup>a</sup>/<sub>b</sub></span>)</p>
```
古怪：使用上标/下标字符：
```
<p>(<input value="ⁿ/ₓ">)</p>
```
这种方法的问题在于，尽管有数字，但可用的字母很少。例如¹²/₃₄。
可能无效：在除法模板中使用分数斜杠字符U + 2044“/”。
```
<input value="1&#x2044;2">
```
根据模板中存在的操作系统，浏览器，字体和字符，使用此字符可能会使左右数字作为分数对角线或垂直排列。以下是一些样本，看看它是否适合您：1/2 1/3 3/4。

Answer 2

也许简单的事情......

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

然后，在CSS ...

.numer {
  position: relative;
  top: -0.5em;
  left: 0.2em;
}
.denom {
  position: relative;
  top: 0.5em;
  left: -0.2em;
}

您可能需要对parens进行一些调整......

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

更新1 ：

参见 jsFiddle

更新2 ：

假设jQuery在这里......

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

此函数将采用唯一的元素标识符（类或id标识符为.fraction1或#frac_234），x和y值，并将代码放在元素中。

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

2 个答案: