Search code examples
javascriptasp.nettextboxmathjaxasp.net-placeholder

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

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">

Solution

  • 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>