Динамическое создание дробей с помощью Javascript внутри редактируемого содержимого div

Я разрабатываю веб-страницу, которая позволяет пользователю вводить математические уравнения и фразы в визуальное пространство без использования настоящей клавиатуры. Пока что у меня есть визуальное пространство, которое представляет собой редактируемый тег div, а также область под ним с кнопками ввода для размещения чисел и математических символов в указанном div. Теперь мне нужен какой-то способ, позволяющий пользователю вводить дроби в div. Я подумал, может быть, каким-то образом использовать Javascript для входа и выхода из «режима» подстрочного/надстрочного индекса и наложения чисел друг на друга, разделенных линией, а затем иметь кнопку, означающую, что пользователь закончил ввод чисел в дробь, но Мои познания в JS на данный момент очень ограничены. Как мне это сделать?


javascript html math fractions
person Ben    schedule 22.10.2012    source источник
comment
Я имею в виду, что дроби — это просто прославленное деление. Вы говорите о том, чтобы сделать их похожими на дроби (например, одно число сверху, разделительная линия, одно снизу?)   -  person thatidiotguy    schedule 22.10.2012
comment
Можете посмотреть stackoverflow.com/questions/10267238/ для визуальных эффектов и ssdtutorials.com/tutorials/title/online-calculator.html о том, как написать браузерное приложение JavaScript с помощью jQuery.   -  person Will    schedule 22.10.2012
comment
Похоже на работу для MathML.   -  person bfavaretto    schedule 22.10.2012
comment
Да, я пытаюсь заставить их быть числами, наложенными друг на друга с разделителем. И я начал с использования MathML, но не смог найти способ динамически добавлять символы.   -  person Ben    schedule 22.10.2012
comment
Здесь у вас есть две проблемы: ввести дробь и отобразить ее. В последнем случае вам может помочь MathJax. В первом случае важна согласованность с остальной частью вашего пользовательского интерфейса, поэтому используйте то, что кажется естественным в вашей настройке.   -  person MvG    schedule 23.10.2012
comment
@Ben, вы можете использовать любой шаблон, который вам нравится, просто изменив регулярное выражение   -  person raam86    schedule 20.06.2013

Ответы (1)


arrow_upward
1
arrow_downward

У вас есть проблема с разбором здесь. Я использовал регулярное выражение для сопоставления с предопределенным шаблоном. Я выбрал стиль LaTex {DIGIT}|{DIGIT}

 function transformFracs() {
 //Grab digits with in {} recording only the numbers
 var regex = /{(\d+)}\|{(\d+)}/;
 //Cache for performance!
 var div = $(this);
 //Replace using html fraction notaion
 var afterReplace = div.html().replace(regex,
     "<sup>$1</sup>" +
     "&frasl;" +
     "<sub>$2</sub>")
 //Replace content of original div
 div.html(afterReplace);
 }
$(".editable").blur(transformFracs);

Проверьте скрипку, чтобы поиграть с ней.

person raam86    schedule 20.06.2013