How to use mathjax in placeholder of textbox in asp.net?

Question

I recently added MathJax to my webform, I'm able to do everything except figure out how to use MathJax as a placeholder inside a TextBox.

example:

<asp:TextBox ID="textbox1" placeholder="$x^2$"></asp:TextBox>

My placeholder doesn't want to use MathJax even though everywhere else it's fine. Is there a specific way to do this when using MathJax inside the placeholder attribute?

Here is my MathJax configuration:

<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">

score 1 · Accepted Answer · answered Aug 19 '17 at 21:28

1

You can add custom attributes in server side with Attributes property and the Add() method.

In the Page_Load event:

textbox1.Attributes.Add("placeholder","$x^2$");

When your page is rendered you should have in the HTML result:

<input id="textbox1" type="text" placeholder="$x^2$" />

Don't forget to add the runat="server" in your ASP.NET control.

<asp:TextBox ID="textbox1" runat="server" placeholder="$x^2$"></asp:TextBox>

answered Aug 19 '17 at 21:28

Danny Fardy Jhonston Bermúdez

5,500
5
25
37

Ok I was able to do it but it still doesnt show the MathJax form. It just shows as: $x^2$. Do you know why its not converting it to MathJax? – justinpees Aug 19 '17 at 21:48
any idea what's wrong? It looks like the placeholder is not loading the mathjax. – justinpees Aug 20 '17 at 18:21
1

I have been researching and I have concluded that **MathJax** does not work with input elements. You can see in this link: https://jsfiddle.net/dannyjhonston/nugjqqhk/. – Danny Fardy Jhonston Bermúdez Aug 20 '17 at 20:37
there is no way around this at all? No alternative solution? – justinpees Aug 20 '17 at 22:01

How to use mathjax in placeholder of textbox in asp.net?

1 Answers1