Нужно представить шаблон дроби в HTML/JS с полем ввода

Question

У меня есть поле ввода (введите текст) и кнопка, которая генерирует общий шаблон дроби. Прямо сейчас это выглядит примерно так (X/Y). Я пытался сделать это лучше, используя методы.sup () и.sub (), но, к сожалению, мне не удалось добиться того, чтобы окончательная форма выглядела следующим образом:

(^X/_Y)

какие-нибудь советы, которые помогут сделать это более эстетичным?

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("");
}

Эта функция будет принимать уникальный идентификатор элемента (идентификатор класса или идентификатора как .fraction1 или же #frac_234), значения x и y и размещает код внутри элемента.