Eingabe nur Am Ende nicht am Curser angehängt?

g.sandra.1995 · 18. Oktober 2020

Guten Tag

ich bin absolut Anfängerin mit den Javascript. Durch Internet Recherche habe ich ein klein Projekt für MathML-Editor gebastelt. Allerdings wird meine Eingabe immer am Ende angehängt. Ich hätte es aber gerne an der Curser-Position. Kann jemand helfen? Hier sind meine Quellcodes

mFg

Sandra

++++++++++

ArabicMathML4.css

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

+++++++++

ArabicMathML4.js

function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

+++++++++

ArabicMathML4.html

<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="ArabicMathML4.css" type="text/css"/>
<script type="text/javascript" src="ArabicMathML4.js"></script>
<title>
MathML Arabic
</title>
</head>
<body bgcolor= "# 000000" text= "gold">


<form name="arabicMathML" >
<textarea id="ans" name="ans" rows="17" cols="172" class="keyboardInput">
</textarea>
<br>
</form>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'MathML')">MathML</button>
<button class="tablinks" onclick="openCity(event, 'Latin')">Latin</button>
<button class="tablinks" onclick="openCity(event, 'Operator')">Operator</button>
<button class="tablinks" onclick="openCity(event, 'Miscellaneous')">Miscellaneous</button>
</div>

<div id="MathML" class="tabcontent">

<form name="arabicMathML02" >
<input type="button" value="mi" onClick="document.arabicMathML.ans.value+='<mi> \n \n \n</mi>\n'">

<input type="button" value="mo" onClick="document.arabicMathML.ans.value+='<mo> \n \n \n</mo>\n'">

<input type="button" value="mn" onClick="document.arabicMathML.ans.value+='<mn> \n \n \n</mn>\n'">

<input type="button" value="ms" onClick="document.arabicMathML.ans.value+='<ms> \n \n \n</ms>\n'">

<input type="button" value="mtext" onClick="document.arabicMathML.ans.value+='<mtext> \n \n \n</mtext>\n'">

<input type="button" value="mfrac" onClick="document.arabicMathML.ans.value+='<mfrac> \n \n \n</mfrac>\n'">

<input type="button" value="binom" onClick="document.arabicMathML.ans.value+='<mfrac linethickness="0"> \n \n \n</mfrac>\n'">

<input type="button" value="bevelled" onClick="document.arabicMathML.ans.value+='<mfrac bevelled="true"> \n \n \n</mfrac>\n'">

<input type="button" value="msub" onClick="document.arabicMathML.ans.value+='<msub> \n \n \n</msub>\n'">

<input type="button" value="msup" onClick="document.arabicMathML.ans.value+='<msup> \n \n \n</msup>\n'">

<input type="button" value="msubsup" onClick="document.arabicMathML.ans.value+='<msubsup> \n \n \n</msubsup>\n'">

<input type="button" value="mrow" onClick="document.arabicMathML.ans.value+='<mrow> \n \n \n</mrow>\n'">

<input type="button" value="msqrt" onClick="document.arabicMathML.ans.value+='<msqrt> \n \n \n</msqrt>\n'">

<input type="button" value="mroot" onClick="document.arabicMathML.ans.value+='<mroot> \n \n \n</mroot>\n'">

<input type="button" value="mspace" onClick="document.arabicMathML.ans.value+='<mspace> \n \n \n</mspace>\n'">

<input type="button" value="mstyle" onClick="document.arabicMathML.ans.value+='<mstyle> \n \n \n</mstyle>\n'">

<input type="button" value="merror" onClick="document.arabicMathML.ans.value+='<merror> \n \n \n</merror>\n'">

<input type="button" value="mpadded" onClick="document.arabicMathML.ans.value+='<mpadded> \n \n \n</mpadded>\n'">

<input type="button" value="mphantom" onClick="document.arabicMathML.ans.value+='<mphantom> \n \n \n</mphantom>\n'">

<input type="button" value="mfenced" onClick="document.arabicMathML.ans.value+='<mfenced> \n \n \n</mfenced>\n'">

<input type="button" value="mstack" onClick="document.arabicMathML.ans.value+='<mstack> \n \n \n</mstack>\n'">

<input type="button" value="mtable" onClick="document.arabicMathML.ans.value+='<mtable> \n \n \n</mtable>\n'">

<input type="button" value="mover" onClick="document.arabicMathML.ans.value+='<mover> \n \n \n</mover>\n'">

<input type="button" value="munder" onClick="document.arabicMathML.ans.value+='<munder> \n \n \n</munder>\n'">

<input type="button" value="munderover" onClick="document.arabicMathML.ans.value+='<munderover> \n \n \n</munderover>\n'">

<input type="button" value="mmultiscripts" onClick="document.arabicMathML.ans.value+='<mmultiscripts> \n \n \n</mmultiscripts>\n'">

<input type="button" value="madruwb" onClick="document.arabicMathML.ans.value+='<menclose notation = "madruwb"> \n \n \n</menclose>\n'">

<input type="button" value="longdiv" onClick="document.arabicMathML.ans.value+='<menclose notation = "longdiv"> \n \n \n</menclose>\n'">

<input type="button" value="actuarial" onClick="document.arabicMathML.ans.value+='<menclose notation = "actuarial"> \n \n \n</menclose>\n'">

<input type="button" value="box" onClick="document.arabicMathML.ans.value+='<menclose notation = "box"> \n \n \n</menclose>\n'">

<input type="button" value="roundedbox" onClick="document.arabicMathML.ans.value+='<menclose notation = "roundedbox"> \n \n \n</menclose>\n'">

<input type="button" value="circle" onClick="document.arabicMathML.ans.value+='<menclose notation = "circle"> \n \n \n</menclose>\n'">

<input type="button" value="left" onClick="document.arabicMathML.ans.value+='<menclose notation = "left"> \n \n \n</menclose>\n'">

<input type="button" value="right" onClick="document.arabicMathML.ans.value+='<menclose notation = "right"> \n \n \n</menclose>\n'">

<input type="button" value="top" onClick="document.arabicMathML.ans.value+='<menclose notation = "top"> \n \n \n</menclose>\n'">

<input type="button" value="bottom" onClick="document.arabicMathML.ans.value+='<menclose notation = "bottom"> \n \n \n</menclose>\n'">

<input type="button" value="updiagonalstrike" onClick="document.arabicMathML.ans.value+='<menclose notation = "updiagonalstrike"> \n \n \n</menclose>\n'">

<input type="button" value="downdiagonalstrike" onClick="document.arabicMathML.ans.value+='<menclose notation = "downdiagonalstrike"> \n \n \n</menclose>\n'">

<input type="button" value="verticalstrike" onClick="document.arabicMathML.ans.value+='<menclose notation = "verticalstrike"> \n \n \n</menclose>\n'">

<input type="button" value="horizontalstrike" onClick="document.arabicMathML.ans.value+='<menclose notation = "horizontalstrike"> \n \n \n</menclose>\n'">

<input type="button" value="nested circle" onClick="document.arabicMathML.ans.value+='<menclose notation = "nested circle"> \n \n \n</menclose>\n'">

<input type="button" value="cross out" onClick="document.arabicMathML.ans.value+='<menclose notation = "cross out"> \n \n \n</menclose>\n'">

<input type="button" value="nested roundedbox" onClick="document.arabicMathML.ans.value+='<menclose notation = "nested roundedbox"> \n \n \n</menclose>\n'">

<input type="button" value="all sides and all strikes" onClick="document.arabicMathML.ans.value+='<menclose notation = "all sides and all strikes"> \n \n \n</menclose>\n'">

<input type="button" value="updiagonalarrow" onClick="document.arabicMathML.ans.value+='<menclose notation = "updiagonalarrow"> \n \n \n</menclose>\n'">

<input type="button" value="madruwb" onClick="document.arabicMathML.ans.value+='<menclose notation = "madruwb"> \n \n \n</menclose>\n'">

<input type="button" value="phasorangle" onClick="document.arabicMathML.ans.value+='<menclose notation = "phasorangle"> \n \n \n</menclose>\n'">
</form>
</div>

<div id="Latin" class="tabcontent">

<form name="arabicMathML03" >

<input type="button" value="Α" onClick="document.arabicMathML.ans.value+='&Alpha;'">

<input type="button" value="Β" onClick="document.arabicMathML.ans.value+='&Beta;'">

<input type="button" value="Γ" onClick="document.arabicMathML.ans.value+='&Gamma;'">

</form>
</div>

</body>
</html>

+++++++++

Sempervivum · 18. Oktober 2020

Hier wird beschrieben, wie man Text an der Cursorposition einfügt:
https://stackoverflow.com/questions...o-the-textarea-at-the-current-cursor-position
Beim nächsten Mal benutze besser Codetags: In der Werkzeugleiste oben die drei Punkte in der Mitte und dann das </>. Sonst wird das [i] verschluckt, weil es als BBCode für "italic" interpetiert wird.

Eingabe nur Am Ende nicht am Curser angehängt?

g.sandra.1995

Mitglied

Sempervivum

Erfahrenes Mitglied

Neue Beiträge