Input in Bild einfügen

[Jonathan Harker]

Hallo Joachim,

Guten Morgen, gibt es eine Möglichkeit ein Inputfeld in dieses Bild unter die rechte Wurzel einzufügen?

Leider kannst du HTML-Formularelemente wie <input> nicht direkt in MathML einbetten – der Standard erlaubt nur MathML-Elemente innerhalb von <math>. Ein <input> würde dort als "fremdes" Element ignoriert oder falsch dargestellt.

👉 Es gibt aber zwei Umwege:

1. Mit CSS platzieren

Du setzt die Formel ganz normal mit MathML und legst ein <input> daneben oder darüber, optisch so, dass es aussieht, als wäre es Teil der Wurzel.

<div style="position: relative; display: inline-block;">
  <math>
    <msqrt>
      <mrow>
        <mo>&#x25A1;</mo> <!-- Platzhalter -->
      </mrow>
    </msqrt>
  </math>
  <input type="text" 
         style="position: absolute; top: 0.2em; left: 0.6em; width: 2em; border: none; border-bottom: 1px solid black; text-align: center;">
</div>

Würd' ich nicht machen!!!!

2. Nur MathML nutzen (ohne echtes Inputfeld)

Du kannst ein Platzhalterzeichen oder <mtext> mit contenteditable="true" verwenden, wenn es dir nur um eine editierbare Darstellung innerhalb der Formel geht:

<math>
  <msqrt>
    <mtext contenteditable="true">?</mtext>
  </msqrt>
</math>

Das ist kein richtiges Formularfeld, aber man kann direkt in der Formel tippen.

Dann kannst du mit JavaScript lauschen, ob es eine Eingabe in [contenteditable] gegeben hat.

Bis bald!
Jonathan