在输入文本中显示平方根？答案

【问题标题】：Display square root at input text?在输入文本中显示平方根？
【发布时间】：2017-02-04 10:42:46
【问题描述】：

如何在带有上划线的 calci 按钮的输入文本框中显示平方根。例如，如果我们想显示一个字符串 80(√2345)68，其中平方根在 2345 处带有上划线（忽略大括号。）。请帮忙！！

【问题讨论】：

我认为您不能在输入字段中绘制完整的平方根。

【解决方案1】：

例如：

<img src="https://chart.googleapis.com/chart?cht=tx&chl=\sqrt(1234)%2Ba^2">

将显示为

【讨论】：

【解决方案2】：

我认为您需要使用引擎来呈现与数学相关的文本/公式。一个流行的是MathJax，查看他们的Documentation。

【讨论】：

谢谢！我会试试的。

【解决方案3】：

MathJax 扩展：forminput mathjax-ext-contrib 具有 sample

下面是上面示例的代码

<!DOCTYPE html>
<html>
<head>
<title>Add \Input to MathJax</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  extensions: ["http://cs.jsu.edu/mathjax-ext/github/forminput/forminput.js"],
  styles: {
    ".MathJax_Input": { "margin": "0 2px" },
    ".red_background": { "background-color": "#F88" }
  }
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

</head>
<body>

<p>
Here is an equation with form elements: 
\(\FormInput{a}x+\FormInput[][red_background]{b}\).
</p>

<p>
Here is another:
\[
\int_{\FormInput[][][2]{lowlim}}^{\FormInput{highlim}} x^3\,dx = 
\left.\frac{x^{\FormInput[2]{n}}}{\FormInput{m}}\right]_2^7
\]
</p>

</body>
</html>

编辑

匹配问题的表达方式

<!DOCTYPE html>
<html>
<head>
<title>Add \Input to MathJax</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  extensions: ["http://cs.jsu.edu/mathjax-ext/github/forminput/forminput.js"],
  styles: {
    ".MathJax_Input": { "margin": "0 2px" },
    ".red_background": { "background-color": "#F88" }
  }
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

</head>
<body>


<p>
  
 <b>square root in the input text box with overline</b> for 80(√2345)68
\[
\ 80\left(\sqrt{\FormInput[][][]{sqrt}}\right)68
\]

</p>

</body>
</html>

【讨论】：

@user7515042 根据您的问题更新了答案。更多参考check here
非常感谢！！ ...实际上我正在制作一个计算器来输入平方根和幂的值。因此，当我们点击按钮时，相应的值将反映到输入文本框中，并面临平方根显示其上划线属性的问题。如果您能提供更多帮助，那就太好了。
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。