如何在 keyup 上调用函数 - Javascript答案

【问题标题】：How to call function on keyup - Javascript如何在 keyup 上调用函数 - Javascript
【发布时间】：2021-12-20 16:58:18
【问题描述】：

我正在尝试将 mathjax 输出创建为 png 文件
我创建了一个 JSFiddle here
我使用了如下代码，我有一个类似的html代码

function myFunction(eqn){

window.MathJax = {
  jax: ["input/TeX", "output/SVG"],
  extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
  showMathMenu: false,
  showProcessingMessages: false,
  messageStyle: "none",
  SVG: {
    useGlobalCache: false
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
  },
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("End", function() {
      var mj2img = function(texstring, callback) {
        var input = texstring;
        var wrapper = document.createElement("div");
        wrapper.innerHTML = input;
        var output = { svg: "", img: ""};
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
        MathJax.Hub.Queue(function() {
          var mjOut = wrapper.getElementsByTagName("svg")[0];
          mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
          // thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
          output.svg = mjOut.outerHTML;
          var image = new Image();
          image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
          image.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            output.img = canvas.toDataURL('image/png');
            callback(output);
          };
        });
      }
      mj2img(eqn, function(output){
        const t = document.getElementById("target"); const i = document.createElement('img'); i.src = output.img; t.append(i);
      });
    });
  }
};
}

(function(d, script) {
  script = d.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.onload = function() {
    // remote script has loaded
  };
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

<textarea onkeyup="myFunction(this.value)"></textarea>
<div id="target"></div>

keyup包含textarea的表单时如何显示图片？

Here 是上述代码的工作版本，提供直接值。

【问题讨论】：

"WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips. 并且您没有正确定义函数 myFunction，您将其命名为 myFuncion 它应该类似于 function myFunction(eqn) {
我改了，控制台报错
js代码中函数名还是myFuncion，改成myFunction
@GhostOps 已更新，但在 JSFiddle 或此处没有结果
碰上这个答案

标签： javascript canvas mathjax

【解决方案1】：

keyup 事件监听器的标准模式

document.getElementById("target").onkeyup = function() {funName()};

根据您的具体问题。我不太确定你想在哪里应用它

【讨论】：

这很容易键入 Eventlistner